En la unidad anterior vimos cómo hacer transiciones CSS3 sobre los elementos de nuestra página web. De esta forma conseguimos proporcionar a los elementos un efecto de animación sobre algunas propiedades básicas de CSS.
En este apartado veremos cómo encadenar diferentes animaciones utilizando la propiedad animation y sus subpropiedades. Para ello, definiremos la propiedad animation sobre nuestros selectores y después definiremos nuestra secuencia de animación mediante @keyframes.
Para crear una animación primero añadiremos al selector la propiedad animation
y utilizaremos sus subpropiedades para configurar la duración o dirección, entre otras cosas. La sintaxis es la siguiente:
selector{ animation-name: identifier; subproperty: value; }
Las subpropiedades de animation
son:
animation-name
Especifica el nombre de la regla @keyframes
que describe los fotogramas de la animación.animation-delay
Tiempo de retardo entre el momento en que el elemento se carga y el comienzo de la secuencia de la animación.animation-direction
Indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.animation-duration
Indica la cantidad de tiempo que la animación consume en completar su ciclo (duración).animation-iteration-count
El número de veces que se repite. Podemos indicar infinite
para repetir la animación indefinidamente.animation-play-state
Permite pausar y reanudar la secuencia de la animación.animation-timing-function
Indica el ritmo de la animación, es decir, como se muestran los fotogramas de la animación, estableciendo curvas de aceleración.animation-fill-mode
Especifica qué valores tendrán las propiedades después de finalizar la animación (los de antes de ejecutarla, los del último fotograma de la animación o ambos).Una vez añadida la propiedad animation a nuestro selector, haremos uso de los @keyframes
para crear animaciones completas.
Los @keyframes son un conjunto de fotogramas clave que describen cómo se muestra cada elemento animado durante la secuencia de la animación. La sintaxis es la siguiente:
@keyframesidentifier { from { ... }percentage { ... }to { ... }}
identifier
Nombre que identifica la lista de keyframe. Debe coincidir con animation-name.from
Desde (por ejemplo: desde 0%).to
Hasta (por ejemplo hasta 100%).percentage
Porcentaje intermedio de las veces que va a ocurrir una animación.Veamos mejor estos valores mediante varios ejemplos.
Vamos a hacer una animación mediante @keyframes de nuestro logo, de forma que se encuentre rotando de forma indefinida. Para ello vamos a utilizar la propiedad transform y le daremos varios valores a su rotación: crearemos una animación con tres keyframes: uno inicial que tendrá rotación de 0 grados, otro en el 50% que tendrá una rotación sobre el eje y de 180 grados y uno final que volverá a tener una rotación de 0 grados.
Código html:
<img class="animacionLogo" src="eniun.png">
Código CSS:
.animacionLogo { animation-duration: 5s; animation-name: animLogo; animation-iteration-count: infinite; } @keyframes animLogo{ from { -webkit-transform: rotate(0deg); transform: rotateY(0deg); } 50%{ -webkit-transform: rotate(180deg); transform: rotateY(180deg); } to { -webkit-transform: rotate(360deg); transform: rotateY(360deg); } }
Ejemplo completo en CodePen:
0
Ahora haremos una animación de un párrafo que se deslizará por el navegador desde el borde derecho de la ventana:
Código CSS:
p { animation-duration: 4s; animation-name: animTexto; margin: 20px; } @keyframes animTexto { from { margin-left: 100%; width: 100%; } to { margin-left: 0%; width: 100%; } }
Ejemplo completo en CodePen:
.dark
Configura diferentes animaciones en alguno de los elementos de tu proyecto web. Por ejemplo, podrías hacer que alguno de los textos e imágenes se muevan desde la derecha de la pantalla del navegador hasta su posición base cuando se recarga la pantalla. También podrías hacer que algún elemento modifique su tamaño y su posición durante un determinado tiempo, etc.