0 FPS

Animaciones CSS3

29 de Enero del 2013 por Josep Antoni Bover, 0 visitas, 0 comentarios, 0 votos
Categorías : CSS, HTML, Programación.

La web está en segundo plano, animación en pausa.

Cargando animación...

Desde hace algún tiempo que he empezado a añadirle poco a poco varias animaciones en CSS3 a mi web. Y al ver que últimamente recibo mensajes sobre ellas, he creído conveniente crear este articulo para enseñaros un poco por dentro dichas animaciones.

Supongo que los usuarios de Chrome, Firefox, y safari os habréis fijado en la animación de las fotos de las entradas aleatorias (que parten desde arriba del documento, y caen hasta su posición por defecto con un pequeño efecto muelle), o en la animación del contenido al cargar / salir de la pagina (que hace una rotación del contenido).

Pues ahora podréis ver con más detalle como funcionan estas animaciones.

Antes de nada deberíais conocer un poco por encima las propiedades animation del CSS3 : @keyframes, animation, animation-delay, animation-direction, animation-duration, animation-name, animation-iteration-count, animation-play-state, animation-timing-function.

Los enlaces anteriores corresponden a la Referéncia de propiedades CSS que hace algún tiempo que estoy preparando pero aun está incompleta.

Rotación del contenido

Vamos a empezar por la animación menos complicada, que sería la de rotar el contenido. La idea es que imaginemos el contenido como una hoja de papel que estamos mirando por su parte lateral fina, y que la vamos girando hasta quedar plana.

Partiendo de que tenemos un div con la id #Contenido que teóricamente está lleno de texto e imágenes, por ejemplo este articulo, necesitamos definir la animación para él :

Rotación del contenido

#Contenido {
    -webkit-animation:KFRotacion3D 1s linear; /* Chrome y Safari */
    -moz-animation:KFRotacion3D 1s linear;    /* Firefox */
    -ms-animation:KFRotacion3D 1s linear;     /* IE 10 */
    -o-animation:KFRotacion3D 1s linear;      /* Opera */
    animation:KFRotacion3D 1s linear;         /* Todos en un futuro */
}

Con este código estamos indicando que el #Contenido usara una animación linear durante 1 segundo con los keyframes definidos en KFRotacion3D.

Fijaros que he definido la misma propiedad 5 veces con prefijos distintos (uno para cada navegador actual)

Ahora veamos como habría que definir la línea de tiempo para la animación (keyframes) :

Línea de tiempo para la animación

@-webkit-keyframes KFRotacion3D {   /* Chrome y Safari */
    0%   { opacity:0.0; -webkit-transform:rotateY(90deg) rotateZ(2deg); }
    100% { opacity:1.0; -webkit-transform:rotateY(0deg) rotateZ(0deg); }
}
@-moz-keyframes KFRotacion3D {      /* Firefox */
    0%   { opacity:0.0; -moz-transform:rotateY(90deg) rotateZ(2deg); }
    100% { opacity:1.0; -moz-transform:rotateY(0deg) rotateZ(0deg); }
}
@-ms-keyframes KFRotacion3D {       /* IE 10 */
    0%   { opacity:0.0; -ms-transform:rotateY(90deg) rotateZ(2deg); }
    100% { opacity:1.0; -ms-transform:rotateY(0deg) rotateZ(0deg); }
}
@-o-keyframes KFRotacion3D {        /* Opera */
    0%   { opacity:0.0; -o-transform:rotateY(90deg) rotateZ(2deg); }
    100% { opacity:1.0; -o-transform:rotateY(0deg) rotateZ(0deg); }
}
@keyframes KFRotacion3D {           /* Todos en un futuro */
    0%   { opacity:0.0; transform:rotateY(90deg) rotateZ(2deg); }
    100% { opacity:1.0; transform:rotateY(0deg) rotateZ(0deg); }
}

Fijaros que se define una línea con 0% (inicio) y otra con 100% (final), es decir que la animación empieza con opacidad 0 y una rotación de 90 grados a la Y, y termina con una opacidad de 1 y una rotación de 0 grados a la Y.

Dentro de un keyframe podemos definir tantos pasos como queramos, por ejemplo podríamos empezar a hacer la rotación a partir del 75% de la animación, para ello bastaría con añadir otra línea con el 75% y las propiedades que queremos animar.

Al principio puede que os suene todo a chino, pero la verdad es que es muy fácil hacer animaciones con este sistema.

Ver Ejemplo

Objetos que caen desde arriba del navegador

Esta animación es la que se ven las imágenes de las entradas aleatorias cayendo desde arriba del navegador. La idea es que caiga la imagen desde arriba, y una vez llega al suelo (su posición Y 0) se comprima la altura como si fuera un muelle, y finalmente se restablezca su altura original.

Objeto cayendo

.Animacion {
    width:155px;                              /* Ancho */
    height:125px;                             /* Altura */
    position:relative;                        /* Posición relativa (permite mover el objeto) */
    background-color:#FFF;                    /* Fondo blanco */
    border:solid 1px #333;                    /* Borde de 1 pixel negro */
    float:left;                               /* Alineado hacia la izquierda */
    margin-left:20px;                         /* Margen de 20 pixeles a la izquierda */
    -webkit-animation:CajaCayendo 1s linear;  /* Animación para Chrome y Safari */
    -moz-animation:CajaCayendo 1s linear;     /* Animación para FireFox */
    -ms-animation:CajaCayendo 1s linear;      /* Animación para IE 10 */
    -o-animation:CajaCayendo 1s linear;       /* Animación para Opera */
    animation:CajaCayendo 1s linear;          /* Animación para navegadores modernos (en un futuro) */
}

Los objetos Animacion en este caso tienen un tamaño fijo de 155x125, la posición relativa (de esta forma podemos modificarla), el fondo blanco con un borde gris, se alinean a la derecha, y tienen un margen a la derecha de 20 pixeles. La animación durara un segundo (realmente no durara un segundo, pero necesitamos un valor inicial), será lineal y usara los keyframes CajaCayendo.

Veamos la línea del tiempo CajaCayendo :

Línea de tiempo para la animación

@-webkit-keyframes CajaCayendo {
    0%  { top:-600px; }
    75% { top:0px; -webkit-transform: scale(1, 1); }
    90% { top:15px; -webkit-transform: scale(1, 0.8); } 
    100% { top:0px; -webkit-transform: scale(1, 1); }
}

En esta ocasión ya utilizamos 4 porcentajes de tiempo, al principio la altura es de -600 pixeles, cuando la animación llega al 75% el objeto toca el suelo, al 90% comprimimos la altura del objeto a una escala de 0.8 y rebajamos la 'Y' inicial 15 pixeles (para que el objeto siga tocando el suelo, al haber rebajado la altura un 0.8% el objeto mide unos 15 pixeles menos, que son los que sumamos a la Y), y finalmente al llegar al 100% volvemos a poner la Y a 0 y restauramos la proporción original de la altura.

En este ejemplo no he incluido el código para FireFox, IE10, Opera, y la propiedad final, ya que me pareció innecesario ocupar media web con lo mismo, pero siguen siendo necesarios si queremos que la animación sea compatible con todos los navegadores.

Ahora nos falta por ver como gestionamos la duración de la animación. Al utilizar varios objetos (en este caso 6) lo ideal es que los objetos no caigan todos al mismo tiempo, para ello vamos a crear 6 clases cada una con una duración distinta :

Duraciones para los 6 objetos

/* Varias duraciones distintas para la animación del banner */
.Duracion1 { -webkit-animation-duration:0.5s;   -moz-animation-duration:0.5s;   
             -ms-animation-duration:0.5s;       -o-animation-duration:0.5s;     animation-duration:0.5s;   }
             
.Duracion2 { -webkit-animation-duration:0.4s;   -moz-animation-duration:0.4s;   
             -ms-animation-duration:0.4s;       -o-animation-duration:0.4s;     animation-duration:0.4s;   }
             
.Duracion3 { -webkit-animation-duration:0.45s;  -moz-animation-duration:0.45s;
             -ms-animation-duration:0.45s;      -o-animation-duration:0.45s;    animation-duration:0.45s;  } 
             
.Duracion4 { -webkit-animation-duration:0.3s;   -moz-animation-duration:0.3s;   
             -ms-animation-duration:0.3s;       -o-animation-duration:0.3s;     animation-duration:0.3s;   }
             
.Duracion5 { -webkit-animation-duration:0.55s;  -moz-animation-duration:0.55s;  
             -ms-animation-duration:0.55s;      -o-animation-duration:0.55s;    animation-duration:0.55s;  }
             
.Duracion6 { -webkit-animation-duration:0.375s; -moz-animation-duration:0.375s;
             -ms-animation-duration:0.375s;     -o-animation-duration:0.375s;   animation-duration:0.375s; }

Fijaros que cada clase Duracion tiene un tiempo distinto para la animación, de esta forma conseguimos un efecto un poco mas alborotado. Además si creamos los objetos con php podemos mezclar las duraciones de forma que la animación nunca parece exactamente igual.

Ver Ejemplo

Y con esto terminamos por hoy, espero que os sirva de ayuda!.

Usuario
Password