Animate.css bestaat nu al een paar jaar en ik moet toegeven dat ik vrij laat op het feest ben. Ik ontdekte het pas een paar maanden geleden toen ik op het net zocht naar enkele CSS-animatielessen en vond wat de snelste, eenvoudigste manier is om te animeren, Animate.css.
Animate.css, gemaakt door een man genaamd Dan Eden, is een snelle manier om te zien hoe CCS werkt en krijgt wat animatie-actie op je website.
Beschreven als 'Just-add water CSS animation' Animate.css is een beetje leuk met een serieuze kant. Hiermee kunnen zelfs amateur-webontwerpers zoals ik snel de grondbeginselen van CSS-animatie begrijpen en eenvoudige maar effectieve effecten voor websites creëren. Van een enkele geanimeerde kop tot meer betrokken bewegingen, deze tool kan het.
Animate.css
Animate.css kan worden gedownload van GitHub en is in wezen een bibliotheek met eenvoudige CSS-effecten die op één plaats zijn verzameld. Elke animatie is mooi verpakt en klaar voor gebruik. Het enige dat u hoeft te doen, is de gewenste animatie vinden en de klasse toepassen. Dat is echt alles wat er is.
Je hoeft niet de hele bibliotheek te downloaden als je dat niet wilt, want er zitten 2500 coderegels in. U kunt de Animate.css-site bezoeken, een animatie zoeken en op de link Animate.css downloaden klikken. Het laadt de klas op een webpagina die u naar eigen inzicht kunt kopiëren en gebruiken.
Het is echter gemakkelijker om GitHub te gebruiken en verder te zoeken om het gewenste effect te vinden.
- Navigeer naar de css GitHub-pagina.
- Klik op de koppeling Bron om de lijst met elementen te openen.
- Selecteer het effecttype dat u zoekt in de lijst. Bounce is een aandachtzoeker, dus selecteer de link aandacht_zoekers.
- Selecteer bounce.css.
- Kopieer de code en plaats deze op uw pagina om de animatie toe te passen.
Het is echt zo simpel. U kiest uiteraard verschillende opties voor de verschillende effecten, maar het eindresultaat is hetzelfde. Toegang tot de code die nodig is om het zware werk op de pagina uit te voeren.
Een geanimeerd object bouwen met Animate.css
Iets cools bouwen met Animate.css is eenvoudig. Het is gewoon een kwestie van de CCS-code vinden en deze toevoegen aan uw eigen CSS. Als ik het kan, kan iedereen het!
De eerste optie op de Animate.css-pagina is bounce, dus laten we die in dit voorbeeld gebruiken.
- Plakken ' ' binnen in uw stylesheet.
- Zoek de CSS voor de gewenste animatie en voeg deze toe aan het element dat u wilt animeren. Voeg bijvoorbeeld ' om dat bounce-effect toe te voegen om te testen, een afbeelding of wat dan ook.
- Voeg de volgende CSS-code toe om alles te laten werken. Genomen uit de bounce.css hierboven.
@keyframes bounce {
van, 20%, 53%, 80%, tot {
animatie-timing-functie: kubieke bezier (0.215, 0.610, 0.355, 1.000);
transform: translate3d (0, 0, 0);
}
40%, 43% {
animatie-timing-functie: cubic-bezier (0.755, 0.050, 0.855, 0.060);
transform: translate3d (0, -30px, 0);
}
70% {
animatie-timing-functie: cubic-bezier (0.755, 0.050, 0.855, 0.060);
transform: translate3d (0, -15px, 0);
}
90% {
transform: translate3d (0, -4px, 0);
}
}
.bounce {
animatienaam: bounce;
transformatie-oorsprong: midden onderaan;
}
Animatie verder brengen met Animate.css
De bovenstaande reeks voegt een bounce-effect toe wanneer de pagina voor het eerst wordt geladen, wat cool is maar eenmalig. Laten we het toevoegen om te zweven. Op die manier stuitert het telkens wanneer iemand over de test zweeft. Het is niet iets dat ik zou doen op een productiewebsite, maar het is een geweldige manier om te laten zien hoe alles werkt.
Voeg de volgende code toe aan uw CSS om het bounce on hover-effect toe te voegen. De, elke keer dat de muis over het element zweeft, zou het moeten stuiteren.
.animated: hover {
-webkit-animatie-duur: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animatie-duur: 1s;
animatieduur: 1 sec;
-webkit-animatie-vulmodus: beide;
-moz-animation-fill-mode: beide;
-ms-animation-fill-mode: beide;
-o-animatie-vulmodus: beide;
animatie-vulmodus: beide;
}
Als je CSS kent, weet je veel beter dan ik over het toepassen van verschillende effecten op verschillende acties. Als beginner helpen deze en de bibliotheken in Animate.css me om eenvoudige, maar effectieve animaties voor mijn webpagina's te maken.
Ik weet niet hoeveel ik zou gebruiken op een live website omdat ze niet altijd zo goed werken en mobiele gebruikers ze helemaal niet leuk vinden. Als een les in hoe CSS werkt en hoe het kan worden gebruikt om het internet te verbeteren, is het echter een geweldige bron. Ik ben slechts een beginner, maar zelfs een paar uur met Animate.css doorbrengen voor deze tutorial heeft me veel geleerd. Ik denk dat ik er nog veel meer mee zal spelen voordat ik klaar ben. En jij?
