Animate.css ha existido hace unos años y debo admitir que llegué bastante tarde a la fiesta. Solo lo descubrí hace un par de meses mientras buscaba en la red algunos tutoriales de animación CSS y descubrí cuál es la forma más rápida y sencilla de animar, Animate.css.
Creado por un tipo llamado Dan Eden, Animate.css es una forma rápida de ver cómo funciona CCS y obtener alguna acción de animación en su sitio web.
Descrito como 'Animación CSS de solo agregar agua', Animate.css es un poco divertido con un lado serio. Permite incluso a los diseñadores web aficionados, como yo, conocer rápidamente los fundamentos de la animación CSS y crear efectos simples pero efectivos para los sitios web. Desde un solo titular animado hasta movimientos más involucrados, esta herramienta puede hacerlo.
Animate.css
Animate.css está disponible para descargar desde GitHub y es esencialmente una biblioteca de efectos CSS simples recopilados en un solo lugar. Cada animación está bien empaquetada y lista para usar. Todo lo que necesitas hacer es encontrar la animación que te gusta y aplicar la clase. Eso realmente es todo lo que hay que hacer.
No tiene que descargar toda la biblioteca si no lo desea, ya que hay 2.500 líneas de código dentro de ella. Puede visitar el sitio Animate.css, encontrar una animación y hacer clic en el enlace Descargar Animate.css. Carga la clase en una página web para que la copie y use como mejor le parezca.
Sin embargo, es más fácil usar GitHub y profundizar para encontrar el efecto que estás buscando.
- Navegue a la página CSS GitHub.
- Haga clic en el enlace Fuente para acceder a la lista de elementos.
- Seleccione el tipo de efecto que está buscando de la lista. Bounce es un buscador de atención, así que seleccione el enlace atención_buscadores.
- Seleccione bounce.css.
- Copie el código y colóquelo en su página para aplicar la animación.
Es realmente así de simple. Obviamente, seleccionaría diferentes opciones para los diferentes efectos, pero el resultado final es el mismo. Acceso al código necesario para hacer el trabajo pesado en la página.
Construyendo un objeto animado con Animate.css
Construir algo genial con Animate.css es simple. Es solo cuestión de encontrar el código CCS y agregarlo a su propio CSS. Si puedo hacerlo, cualquiera puede!
La primera opción en la página Animate.css es rebotar, así que usemos eso en este ejemplo.
- Pegar ' ' dentro en tu hoja de estilo.
- Encuentre el CSS para la animación que desee y agréguelo al elemento que desea animar. Por ejemplo, agregue ' 'para agregar ese efecto de rebote a prueba, una imagen o lo que sea.
- Agregue el siguiente código CSS para que todo funcione. Tomado del bounce.css de arriba.
@keyframes rebote {
del 20%, 53%, 80% a {
función de sincronización de animación: cubic-bezier (0.215, 0.610, 0.355, 1.000);
transformar: traducir3d (0, 0, 0);
}
40%, 43% {
función de sincronización de animación: cubic-bezier (0.755, 0.050, 0.855, 0.060);
transformar: translate3d (0, -30px, 0);
}
70% {
función de sincronización de animación: cubic-bezier (0.755, 0.050, 0.855, 0.060);
transformar: translate3d (0, -15px, 0);
}
90% {
transformar: traducir3d (0, -4px, 0);
}
}
.rebotar {
nombre-animación: rebote;
origen de transformación: centro inferior;
}
Llevando la animación más lejos con Animate.css
La secuencia anterior agrega un efecto de rebote cuando la página se carga por primera vez, lo cual es genial, pero es algo único. ¿Qué tal si lo agregamos para pasar el mouse sobre él? De esa manera, cada vez que alguien pasa el cursor sobre el examen, este rebota. No es algo que haría en un sitio web de producción, pero es una excelente manera de demostrar cómo funciona todo.
Agregue el siguiente código a su CSS para agregar el rebote en el efecto de desplazamiento. Cada vez que el mouse pasa sobre el elemento, debe rebotar.
.animated: hover {
-webkit-animation-duración: 1s;
-moz-animation-duración: 1s;
-ms-animación-duración: 1s;
-o-animación-duración: 1s;
duración de la animación: 1s;
-webkit-animation-fill-mode: ambos;
-moz-animation-fill-mode: ambos;
-ms-animation-fill-mode: ambos;
-o-modo-relleno-animación: ambos;
modo de relleno de animación: ambos;
}
Si conoce CSS, sabrá mucho mejor que yo acerca de cómo implementar diferentes efectos en diferentes acciones. Como principiante, esto y las bibliotecas proporcionadas en Animate.css me ayudan a crear animaciones básicas pero efectivas para mis páginas web.
No sé cuántos usaría en un sitio web en vivo, ya que no siempre caen demasiado bien y parece que a los usuarios de dispositivos móviles no les gustan mucho. Sin embargo, como una lección sobre cómo funciona CSS y cómo se puede usar para mejorar la web, es un gran recurso. Soy un principiante, pero incluso pasar un par de horas con Animate.css para este tutorial me ha enseñado mucho. Creo que jugaré mucho más antes de que termine. ¿Qué hay de tí?
