Personalmente, soy un devoto, de esta propiedad, supera a la propiedad transition, que como ya sabemos, es un cambio de estilos gradual, de uno inicial a uno final, que requiere, la interacción del usuario, bien haciendo :hover ó clickando en el elemento, con animation, podemos hacer, el cambio de un estilo a otro, y otro y así sucesivamente, en una secuencia de tiempo, en que nosotros, podemos controlar los pasos, y sin necesidad de la interacción del usuario. Con esto imaginad todo el dinámismo que podemos implementar, solo con CSS, a las páginas web.
Lograremos animar cualquier elemento, con dos simples pasos:
Primero tenemos que declarar la propiedad animation, para ese elemento, con la sintaxis que detallaré a continuación.
En segundo lugar tendremos, que especificar, la regla, @keyframes, que llevara, el nombre que hayamos asignádo, a la animación y serán los distintos estados o pasos de la misma. Lo veremos más detallado despues.
Esta propiedad, esta compuesta por unas cuantas subpropiedades, algunas comunes a las de transition y son:
1 animation-name: Lo primero, es asignarle un nombre a la animación, puedes ponerle el que quieras, lo más logico, es asignarle un nombre que tenga relación, con el efecto que haga y facil de recordar, por la legibilidad del código a posteriori. Este nombre es el mismo que tendra, la regla @keyframes que regirá, el comportamiento de nuestra animación.
2 animation-duration: Declaramos el tiempo en segundos o milisegendos que durará la animación, como para transition.
3 animation-timing-function: Ritmo con que se desarrollará la animación. Igual que para transition.
4 animation-delay: Tiempo de espera, antes de comenzar la animación. Igual que en la propiedad transition.
5 animation-iteration-count: Numero de veces que se repetira la animación, desde una vez (valor por defecto), hasta infinite ó cualquier numero de veces.
6 animation-direction: Establecemos la dirección, de la animación, puede recibir los valores: normal, reverse, alternate ó alternate-reverse. Significa que la dirección sera del principio al final, del final al principio o alternando las iteraciones pares e impares.
7 animation-fill-mode: Podemos determinar el estado, en que quedara, la animación, al terminar. Puede recibir los valores: none, forwards, backwards ó both. Con forwards, la animación al terminar, muestra el último fotograma, con backwards termina mostrando, el primer fotograma, y con both, mostrará, un estado intermedio.
8 animation-play-state: Definimos el estado de la animación. Los valores son running ó paused, es decir que este en reproducciòn, valor por defecto running, ó que este pausada paused. Algo que puede resultar útil en combinación con asignarle clases, mediante javascript.
No es necesario, especificar todas las subpropiedades de una animación, pero tendremos mayor control, sobre ella, cuando más especifica sea. También podemos declarar la animación abreviadamente, en una sola línea de código.
Para hacer nuestros archivos css, más claros y ordenados, declararemos las animaciones en este orden:
Con esto tenemos la mitad de la animación implementada, ahora nos faltaría especificar la regla @keyframes de nuestra animación, donde definiremos los fotográmas de la misma.
Keyframes ó fotogramas clave, como ya he anticipado brevemente, para determinar el comportamiento de nuestra animación, tenemos esta regla, cuya sintaxis básica es:
Esto es, la síntaxis básica, donde se definen, unicámente el primer y el último fotográmas, y el navegador se encarga, de los intermedios, si queremos podemos definirlos nosotros, insertando todos los fotográmas ó pasos intermedios, que queramos, y así controlar, más concretamente, nuestra animación.
Veamoslo en un pequeño ejemplo práctico, voy a emplear, la misma animación, que he puesto arriba, aplicandosela a un </div> ya sabeís, podemos aplicarla, a cualquier elemento html, en este caso le declaro position: relative; porqué hay un desplazamiento. La llamo movimiento, para asociarla al efecto, que quiero que haga, y es el mismo nombre, que llavara la regla, @keyframes, que como podeís ver abajo, consiste en un simple, desplazamiento a la izquierda, animo la propiedad left. Un par de detalles, la animation-timing-function: ritmo de la animación, lo determina la función de tiempo, cubic-bezier, hace los efectos rebote, y aquí es relevante el animation-direction:, puesto en
alternate; para que la animación, fluya de derecha a izquierda, sino, daría saltos bruscos, por último, la animation-play-state:, la declaro en paused, para activarla en el :hover, del <div> que contiene, al que nosotros animamos, también es habitual, asociar, el elemento, a algún evento de javascript, un click, un mouseover, etc, para manejar, la activación, de la animación, sino estaría corriendo constantemente, ya que su animation-iteration-count: es infinite;
Veamos otro ejemplo, un poco más elaborado, animaremos más propiedades juntas e introduciremos más pasos intermedios en la regla @keyframes:, quiero hacer el efecto, de una pelota que aparece botando y acaba rodando.
Abajo, podeís ver, todas las propiedades css, animadas y la regla @keyframes utilizada.
Como podeís, observar con la propiedad animation, tenemos una herramienta, fántastica para llenar de dinámismo, nuestra páginas, solo con CSS.
Para ir concluyendo, he preparado unas cuantas animaciones, para seguir observándo, el poder, de esta magnifica propiedad de CSS, algunas funcionán en el :hover, y otras las he implementado, con botones, de play y pause, y un poco de javascript, pues las animaciones, con timing-iteration-count: infinite, parecen, muy estridentes, corriendo continuamente.
Informática ó ciencia de la computación.
Encargada de estudiar la administración de métodos, técnicas y procesos con el fin de almacenar, procesar y transmitir información y datos en formato digital.
Informática ó ciencia de la computación.
Encargada de estudiar la administración de métodos, técnicas y procesos con el fin de almacenar, procesar y transmitir información y datos en formato digital.
Lenguaje de marcado de hipertexto.
Lenguaje de marcado de hipertexto.
CASCADING STYLE SHEET.
CASCADING STYLE SHEET.
Lenguaje de programación del lado del cliente, que sirve para aportar dinámismo a las páginas web, estandar en todos los navegádores.
Lenguaje de programación del lado del cliente, que sirve para aportar dinámismo a las páginas web, estandar en todos los navegádores.
Bueno, todas las últimas animaciones, no las explico, para que si alguna te gusta, recomendarte, lo de siempre, inspeccionala, con la herramienta dev tools del navegador, ó click derecho y ver código fuente de la página.
Gracias por leer, si tienes algo que comentar ó sugerir, agradeceria tu contacto, hasta la próxima.
