jueves, 21 de enero de 2016

Keyframes Animation para CSS3


Keyframes Animation para CSS3

En esta entrada quiero contaros un poco la sintaxis de Keyframes Animation.
Imagino que todos sabéis y si no lo cuento, que todavía hay que emplear los prefijos específicos para cada uno de los navegadores dónde queremos que sea mostrada una animación de este tipo.

Prefijos para los navegadores

Los prefijos son -webkit, -moz y -ms.
En esto que os cuento, utilizaré únicamente los prefijos -webkit para hacer la parte de código un poco más reducida. Pero no podemos olvidar que si nos apetece ver cualquiera de estos ejemplos en Firefox debemos añadir el mismo código pero emplear también el prefijo -moz.

@-webkit-keyframes animacion1 {
0% {opacity:0;}
@-moz-keyframes animacion1 {
100% {opacity: 1;}
}
}
0% {opacity:0;}
100% {opacity: 1;}

Declaración de Keyframes

A partir de ahora utilizaré únicamente el prefijo -webkit

Definimos nuestra animación

@-webkit-keyframes nombre-de-la-animacion {
0% { opacity: 0; }
20% { opacity: 1; -webkit-transform:translateX(150px) }
63% { opacity: 0; -webkit-transform:translateY(150px) }
}
...Tantos como queramos...
100% { opacity: 1; }
Otra forma para definir nuestra animación
@-webkit-keyframes nombre-de-la-animacion {
from { -webkit-transform:translateX(150px); }
to { -webkit-transform:translateY(150px); }
}
Con nuestra animación definida, nos toca asignarla a un objeto mediante una determinada clase o como en este caso directamente por su ID al elemento #recuadro.
#recuadro {
-webkit-animation: nombre-de-la-animacion;
-webkit-animation-duration: 5s;
}
-webkit-animation-iteration-count: infinite;
Pudiendo resumir esta asignación de la siguiente forma
#recuadro {
-webkit-animation: nombre-de-la-animacion 5s infinite;
}
De esta forma estamos asignando la animación al objeto #recuadro mediante su #id.
Indicando que la animación va a durar 5 segundos y que se repita de forma infinita.

Podemos configurar otras propiedades de nuestra animación

Desde esta entrada explico las diferentes propiedades una por una.
Ahora os dejo el ejemplo de una sencilla animación que será asignada a dos objetos. A uno de ellos mediante su #id y a otro por su .clase.

No hay comentarios:

Publicar un comentario

Entradas populares