10 CSS3-animatiegereedschappen die u als bladwijzer moet gebruiken

Omdat mensen gemakkelijker dingen waarnemen die bewegen, kunnen slim gebruikte animaties de gebruikerservaring van een site verbeteren aandacht vestigen op belangrijke elementen die gebruikers snel moeten opmerken.

CSS3 heeft een nieuwe animatiesyntaxis geïntroduceerd waarmee u veel interessante dingen in uw ontwerpen kunt bereiken. Het bouwen van coole animaties kan soms echter ingewikkeld en tijdrovend zijn, dat is wanneer animaiton-bibliotheken en -generators uitstekend kunnen worden gebruikt.

Bekijk enkele van de animaties die mogelijk zijn gemaakt met CSS:

• 38 Inspirerende CSS3-animatiedemo's
• 15 prachtige teksteffecten gemaakt met CSS
• 30 coole CSS-animaties die je moet zien
• Hoe het bounce-effect te creëren met CSS3-animatie

In deze post zullen we een kijkje nemen bij 10 briljante tools die het gemakkelijker en sneller kunnen maken om je eigen animaties te maken.

1. CSS3Gen CSS3 Animation Generator

CSS3Gen biedt u een eenvoudig te gebruiken animatiegenerator waarmee u snel basisanimaties kunt genereren. Hoewel je met deze tool geen gecompliceerde kunstwerken zult maken, is het een uitstekende keuze als je zonder al te veel gedoe een standaardanimatie wilt maken.

U hoeven uw handen niet vies te maken met code, aangezien u de eigenschappen op een formulier kunt instellen, een voorbeeld van het resultaat kunt bekijken en vervolgens de code kunt kopiëren en in uw eigen CSS-bestand kunt plakken.

2. CSS Animate

als jij heb meer gecompliceerde animaties nodig, je kan vinden CSS Animate nuttig. Het heeft een meer volwassen gebruikersinterface, je kunt iets meer eigenschappen instellen en je kunt de animatie volgen, stoppen en opnieuw starten met behulp van een intuïtieve tijdlijn.

Er zijn ook voorbeeldanimaties, zoals “Stuiteren”, “Schudden”, en “Schommel”, die u in de generator kunt laden en de code kunt aanpassen aan uw behoeften.

3. Coveloping CSS Animation Generator

CovelopingDe animatiegenerator is waarschijnlijk de beste keuze als je nieuw bent met CSS3-animaties, en wil snel begrijpen hoe ze werken. Met deze eenvoudige maar krachtige tool kun je de verschillende soorten animaties testen die CSS3 te bieden heeft, en eenvoudig bekijken wat het verschil is tussen hen.

U hoeft slechts 4 parameters in te stellen: animatietype, animatiefunctie, duur in seconden en als de animatie oneindig is. Wanneer u klaar bent, hoeft u alleen de gegenereerde HTML- en CSS-code te bemachtigen.

4. Magische animaties

Magische animaties is een coole CSS-bibliotheek die dit mogelijk maakt plaats eenvoudig animaties met speciale effecten op uw site. U kunt elementen bijvoorbeeld laten in- en uitschakelen, naar links of rechts openen, vervolgens terugkeren, naar beneden draaien, naar boven, naar links of naar rechts, en vele anderen

Het enige wat u hoeft te doen is de code downloaden, het CSS-bestand opnemen in uw HTML-pagina en de juiste klasse toevoegen met behulp van jQuery op de volgende manier:

 $ ('. yourdiv'). hover (function () $ (this) .addClass ('magictime puffIn'););

U kunt ook de instellingen van de timer wijzigen en de animatie oneindig maken met behulp van jQuery (lees het Leesmij-bestand voor meer informatie).

5. Animate.css

Animate.css biedt u een set met coole, cross-browser CSS3-animaties. De animaties zijn onderverdeeld in groepen zoals Attention Seekers, Bouncing Entrances, Bouncing Exits, Fading Entrances en vele anderen, dus je kunt echt niet klagen over een gebrek aan keuzes.

U kunt de code downloaden van Github, dan hoeft u alleen het CSS-bestand aan uw HTML-pagina toe te voegen en de relevante CSS-klassen aan de HTML-elementen die u wilt animeren.

6. Bounce.js

Bounce.js is een handige JavaScript-bibliotheek waarmee u dit kunt doen maak gecompliceerde animaties. Bounce.js heeft een volwassen gebruikersinterface waarmee je verschillende componenten - zoals versoepeling, duur, vertraging en aantal bounces - handmatig aan je animatie kunt toevoegen, of een kant-en-klare preset kunt selecteren en vervolgens de animatie kunt afspelen, en verfijn de eigenschappen indien nodig.

7. AniJS

anijs is een supercoole JavaScript-bibliotheek waarmee je CSS3-animaties aan je ontwerpen en aan kunt toevoegen bouw geavanceerde UI-componenten zoals geanimeerde tabbladen, accordeons, modals, glijdende menu's, mobiele app-meldingen, scrol onthullen en nog veel meer.

Het werkt met alle moderne browsers, waaronder iOS en Android, heeft geen bibliotheken van derden nodig en heeft een spectaculaire showcase genaamd AniCollection, waar je gemakkelijk kunt experimenteren met de verschillende effecten die de bibliotheek biedt.

8. CSS-spinners met één element

Heb je ooit je ontwerpen willen verbeteren met geanimeerde laadspinners? Als het antwoord ja is, kan deze schattige CSS-spinnerbibliotheek een uitstekende keuze voor u zijn. De CSS-code voor de spinners is geschreven in MINDER. Er zijn geen instellingen, de code is kant en klaar, u hoeft deze alleen in uw eigen HTML- en CSS-bestanden in te voegen.

9. Kilometerteller

Kilometerteller is een briljante tool om plaats koele geanimeerde meters op uw site. Het is een CSS- en JavaScript-bibliotheek, het CSS-deel is geschreven in Sass en u kunt kiezen uit verschillende thema's, zoals “Digitaal”, “Treinstation”, en “Auto”.

Om Odometer te gebruiken, moet u het JavaScript-bestand en het gekozen themabestand toevoegen aan uw HTML-pagina en vervolgens aan het class = "kilometerteller" selector naar het element dat u wilt maken in een geanimeerde meter. Ideale keuze om gegevens visueel weer te geven of om een “Komt binnenkort” pagina meer in het oog springend.

10. Snabbt.js

Snabbt.js is een minimalistische animatiebibliotheek die helpt je gemakkelijk dingen te verplaatsen. Als je een beetje inspiratie nodig hebt, bekijk dan de demo's om te zien wat je kunt bereiken met deze slimme animatietool, het geanimeerde periodieke tabel op de onderstaande screenshot is slechts een van de vele mogelijkheden die Snabbt.js eenvoudig te implementeren maakt.

Je moet een beetje JavaScript schrijven als je deze bibliotheek wilt gebruiken, maar het resultaat is best spectaculair, dus het is waarschijnlijk de moeite waard.