10 CSS3 Animationsverktyg Du bör bokmärke

Eftersom människor tenderar att lättare uppfatta saker som rör sig kan smarta animationer förbättra användarupplevelsen av en webbplats av uppmärksamma viktiga element som användare måste snabbt märka.

CSS3 har infört en ny animationssyntax som kan hjälpa dig att uppnå många intressanta saker i dina mönster. Att bygga coola animationer kan ibland vara komplicerade och tidskrävande men det är då animaiton-bibliotek och generatorer kan användas utmärkt.

Kolla in några av de animationer som möjliggjorts med CSS:

• 38 Inspirerande CSS3-animationsdemonstrationer
• 15 vackra texteffekter skapade med CSS
• 30 Cool CSS-animationer du måste se
• Hur man skapar studsningseffekten med CSS3-animering

I det här inlägget tar vi en titt på 10 briljanta verktyg som kan göra det enklare och snabbare att skapa egna animationer.

1. CSS3Gen CSS3 Animation Generator

CSS3Gen ger dig en lättanvänd animationsgenerator som gör att du snabbt kan skapa grundläggande animeringar. Även om du inte gör komplicerade konstverk med det här verktyget, är det ett bra val om du vill skapa en standardanimering utan för mycket krångel.

Du behöver inte göra dina händer smutsiga med kod, Eftersom du kan ställa in egenskaperna på ett formulär, förhandsgranska resultatet och sedan kopiera och klistra in koden i din egen CSS-fil.

2. CSS animera

Om du behöver mer komplicerade animeringar, du kanske hittar CSS animera användbar. Den har en mer mogen användargränssnitt, du kan ange lite fler egenskaper, och du kan följa, stoppa och starta animationen med hjälp av en intuitiv tidslinje.

Det finns också exempel animationer, till exempel “Studsa”, “Skaka”, och “Svänga”, att du kan ladda in i generatorn, och ändra koden enligt dina behov.

3. Coveloping CSS Animation Generator

Covelopinganimationsgenerator är förmodligen det bästa valet om du är ny med CSS3-animationer, och vill snabbt förstå hur de fungerar. Med det här enkla men kraftfulla verktyget kan du testa de olika typerna av animeringar CSS3 har att erbjuda, och enkelt kolla vad som är skillnaden mellan dem.

Du behöver bara ställa in 4 parametrar: animationstyp, animationsfunktion, längd i sek och om animeringen är oändlig. När du är redo behöver du bara ta tag i den genererade HTML- och CSS-koden.

4. Magic Animationer

Magic Animationer är ett coolt CSS-bibliotek som gör det möjligt att Placera enkelt animeringar med specialeffekter på din webbplats. Till exempel kan du få element att försvinna in och ut, öppna till vänster eller höger, sedan tillbaka, rotera ner, upp, vänster eller höger och många andra

Allt du behöver göra är att ladda ner koden, inkludera CSS-filen i din HTML-sida och lägg till lämplig klass med hjälp av jQuery på följande sätt:

 $ ('.div'). sväva (funktion () $ (detta) .addClass ('magictime puffIn'););

Du kan också ändra inställningarna för timern och göra animationen oändlig med hjälp av jQuery (för mer information se readme-filen).

5. Animate.css

Animate.css ger dig en uppsättning av coola, CSS3-animeringar med flera webbläsare. Animationerna är uppdelade i grupper som Attention Seekers, studsade entréer, studsutgångar, Fading Entrances och många andra, så du kan verkligen inte klaga på brist på val.

Du kan ladda ner koden från Github, då behöver du bara lägga till CSS-filen på din HTML-sida och relevanta CSS-klasser till HTML-elementen som du vill animera.

6. Bounce.js

Bounce.js är ett praktiskt JavaScript-bibliotek som gör att du kan skapa komplicerade animeringar. Bounce.js har ett modent användargränssnitt som låter dig antingen lägga till olika komponenter - till exempel lättnad, varaktighet, fördröjning och antal studsar - manuellt till din animering, eller välj en förinställd förinställning och spela sedan animeringen, och finjustera egenskaperna om det är nödvändigt.

7. AniJS

AniJS är ett superkool JavaScript-bibliotek som låter dig lägga till CSS3-animationer till dina mönster, och till bygga sofistikerade användargränssnittskomponenter till exempel animerade flikar, dragspel, modaler, glidande menyer, mobilappmeddelanden, scroll avslöjar och många fler.

Det fungerar med alla moderna webbläsare, inklusive iOS och Android, behöver inte några tredje part libraries och har en spektakulär showcase kallad AniCollection där du enkelt kan experimentera med de olika effekterna från biblioteket.

8. Single Element CSS Spinners

Har du någonsin velat förbättra dina mönster med animerade lastspinnare? Om svaret är ja, kan detta söta CSS spinner-bibliotek vara ett utmärkt val för dig. CSS-koden för spinnarna är skriven i LESS. Det finns inga inställningar, koden är klar, du behöver bara infoga den i dina egna HTML- och CSS-filer.

9. Odometer

Vägmätare är ett briljant verktyg till placera coola animerade meter på din webbplats. Det är ett CSS- och JavaScript-bibliotek, CSS-delen är skrivet i Sass, och du kan välja bland olika teman som “Digital”, “Tågstation”, och “Bil”.

För att använda kilometern måste du lägga till JavaScript-filen och den valda temafilen på din HTML-sida, sedan class = "odometer" väljare till det element du vill göra till en animerad mätare. Idealiskt val för att visuellt representera data, eller att göra en “Kommer snart” sida mer iögonfallande.

10. Snabbt.js

Snabbt.js är ett minimalistiskt animationsbibliotek som hjälper dig att enkelt flytta saker runt. Om du behöver lite inspiration, ta en titt på demonerna för att se vad du kan uppnå med detta smarta animationsverktyg, det animerade periodiska tabellen på skärmdumpen nedan är bara en av de många möjligheterna Snabbt.js gör det enkelt att implementera.

Du måste skriva lite JavaScript om du vill använda det här biblioteket, men eftersom resultatet är ganska spektakulärt, så är det förmodligen värt besväret.