Animate.css ja fa uns quants anys que haig d’admetre que ja feia bastant d’hora. Només ho vaig descobrir fa uns mesos mentre vaig cercar a la xarxa alguns tutorials d’animació CSS i vaig trobar quina ha de ser la manera més ràpida i senzilla d’animar-se, Animate.css.
Creat per un tipus anomenat Dan Eden, Animate.css és una manera ràpida de veure com funciona CCS i obtenir accions d’animació al vostre lloc web.
Es descriu com "Animació addicional CSS d'aigua" Animate.css és una mica divertit amb un costat seriós. Permet fins i tot dissenyadors web aficionats, com jo, arribar ràpidament als fonaments de l’animació CSS i crear efectes senzills però efectius per a llocs web. Des d'un sol títol animat fins a moviments més implicats, aquesta eina pot fer-ho.
Animar.css
Animate.css es pot descarregar de GitHub i és essencialment una biblioteca d’efectes CSS simples recollits en un mateix lloc. Cada animació està ben empaquetada i llesta per utilitzar. Tot el que heu de fer és trobar l’animació que us agradi i aplicar la classe. Realment és tot el que hi ha.
No heu de descarregar tota la biblioteca si no voleu, ja que hi ha 2.500 línies de codi. Podeu visitar el lloc Animate.css, trobar una animació i fer clic a l’enllaç Descarrega Animate.css. Carrega la classe a una pàgina web perquè puguis copiar-la i utilitzar-la com creguis oportuna.
Tot i això, és més fàcil utilitzar GitHub i buscar-ne l'efecte que busqueu.
- Desplaceu-vos a la pàgina de css GitHub.
- Feu clic a l’enllaç Font per accedir a la llista d’elements.
- Seleccioneu el tipus d'efecte que busqueu a la llista. El rebot és un cercador d’atenció, així que seleccioneu l’enllaç attention_seekers.
- Seleccioneu bounce.css.
- Copieu el codi i poseu-lo a la pàgina per aplicar l'animació.
Realment és tan senzill. Evidentment seleccionaríeu diferents opcions per als diferents efectes, però el resultat final és el mateix. Accés al codi necessari per fer l’elevament intens de la pàgina.
Construcció d'un objecte animat amb Animate.css
Construir alguna cosa genial amb Animate.css és senzill. Es tracta només de trobar el codi CCS i afegir-lo al vostre CSS. Si ho puc fer, qualsevol pot!
La primera opció a la pàgina Animate.css és de rebot, per tant, utilitzem-la en aquest exemple.
- Enganxa ' 'a l'interior al vostre full d’estils.
- Cerqueu el CSS per a l'animació que vulgueu i afegiu-lo a l'element que vulgueu animar. Per exemple, afegir ' "Per afegir aquest efecte de rebot a prova, una imatge o qualsevol cosa.
- Afegiu el següent codi CSS perquè tot funcioni. Tret del rebot.css de dalt.
@keyframes rebot {
del, 20%, 53%, 80%, a {
funció d’animació-cronometratge: cubic-bezier (0, 215, 0, 610, 0, 355, 1.000);
transformar: traduir3d (0, 0, 0);
}
40%, 43% {
funció d'animació-cronometratge: cubic-bezier (0, 755, 0, 050, 0, 855, 0, 060);
transform: translate3d (0, -30px, 0);
}
70% {
funció d'animació-cronometratge: cubic-bezier (0, 755, 0, 050, 0, 855, 0, 060);
transform: translate3d (0, -15px, 0);
}
90% {
transform: translate3d (0, -4px, 0);
}
}
. rebot {
animació-nom: rebot;
transform-origen: fons central;
}
Animeu l'animació amb Animate.css
La seqüència anterior afegeix un efecte de rebot quan es carrega la pàgina per primera vegada, cosa que és genial però és única. Què podem fer, per afegir-ho. D’aquesta manera, cada vegada que algú passa per sobre de la prova, rebota. No és una cosa que faria en un lloc web de producció, però és una manera fantàstica de demostrar com funciona tot.
Afegiu el codi següent al vostre CSS per afegir l'efecte rebot al pas. Cada vegada que el ratolí passa sobre l’element, hauria de rebotar.
.animat: hover {
-webkit-animació-durada: 1s;
-moz-animació-durada: 1s;
-ms-animació-durada: 1s;
-o-animació-durada: 1s;
animació-durada: 1s;
-magatzematge-animació-mode-ompliment: tots dos;
-moz-animation-fill-mode: totes dues;
-ms-animation-animation-fill-mode: totes dues;
-o-animació-mode d’ompliment: tots dos;
animació-mode d’ompliment: tots dos;
}
Si coneixeu CSS, sabreu molt millor que jo sobre com implementar efectes diferents a diferents accions. Com a principiant, això i les biblioteques proporcionades a Animate.css m’ajuden a crear animacions bàsiques però efectives per a les meves pàgines web.
No sé quants faria servir en un lloc web en viu, ja que no sempre baixen massa bé i als usuaris de mòbil no els agrada gaire. Tanmateix, com a lliçó de com funciona CSS i com es pot utilitzar per millorar la web, és un gran recurs. Només sóc un principiant, però fins i tot passar un parell d’hores amb Animate.css per aquest tutorial m’ha ensenyat molt. Crec que jugaré amb ell molt més abans que acabi. Què tal?
