Crea tu Web: Indice de diseño

Animaciones con CSS3

En las secciones de transformaciones 2D y 3D se ven animaciones realziadas cambindo porpiedades de estilos mediante Javascript . Son animaciones, pero programadas. Pues bien, CSS3 permite animaciones sin usar scripts, permite que la apariencia de un bloque cambie en el tiempo, se pueden hacer animaciones reales usando solo estilos CSS3. Mediante esta técnica podremos hacer que cambie cualquier propiedad de forma gradual, en un tiempo determinado, a una velocidad concreta, que se repita en bucle....

@keyframes

El primer paso para poner una animación en nuestra página es crear la regla apropiada mediante @keyframes. Esta regla se usa para definir la animación, es decir, para definir las propiedades del estilo que van a cambiar.

@keyframes animarfondo
{
from {background: red;}
to {background: yellow;}
}

En este ejemplo definimos una animación que mostrará el fonod cambiando desde rojo a amarillo. Pero ahor queda aplicarla a un bloque

.caja
{
animation: animarfondo 5s infinite;
}

Esta clase caja aplicada a un elemento, un bloque div por ejemplo, hará que su color de fondo cambie.

Aquí el fondo cambia de RED hasta YELLOW en 5 segundos y se repite el bucle continuamente(atributo infinite)

La regla @keyframes describe cada paso de la animación, en el ejemplo se ha usado para un cambio continuo de princiio (from) a fin (to), pero se puede trocear en pasos usando porcentajes. El cuadro de abajo cambia en cuatro pasos

@keyframes anim_pasos
{
0% {top:0px; left:0px; background:black; color:white}
25% {top:0px; left:100px; background:blue;color:yellow}
50% {top:100px; left:100px; background:yellow;color:blue}
75% {top:100px; left:0px; background:green;color:white}
100% {top:0px; left:0px; background:black;color:white}
}


Aquí el fondo cambia en cuatro fases y sin usar scripts para nada.

 

 

 

 

arriba


Comunidad Virtual. Alojamiento gratis