Animaciones con CSS3
En las secciones de transformaciones 2D y 3D se ven animaciones realizadas 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.
<style>
@keyframes animarfondo
{
from {background: red;}
to {background: yellow;}
}
.caja
{
width: 300px;
height: 300px;
animation: animarfondo 5s infinite;
}
</style>
En este ejemplo definimos una animación que mostrará el fondo cambiando desde rojo a amarillo. Pero ahor queda aplicarla a un bloque
<body>
<div class="caja"></div>
</body>
Esta clase caja aplicada a un elemento, un bloque div por ejemplo, hará que su color de fondo cambie de rojo a amarillo en 5s y que se repita de forma indefinida.
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
<head>
<style>
@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}
}
.caja
{
width: 300px;
height: 300px;
animation: anim_pasos 5s infinite;
}
</style>
</head>
<body>
<div class="caja"></div>
</body>
No abuses de ellas.