Animaciones

Esta documentación explica el uso de las animaciones de CSS3

Las animaciones de CSS3 son la herramienta perfecta para animar cualquier elemento, para crear un efecto puntual o para crear un movimiento continuo de algún elemento (es decir, se pueden mover varias elementos de forma continuada pudiendo crear animaciones que antes solo se veían en flash o con JavaScript).
Las animaciones usan el parámetro animation en CSS, para su uso estándar, por lo que es más correcto (por cuestiones de compatibilidad) también incluir el parámetro de cada navegador.
La mayoría de los navegadores son compatible, pero Internet Explorer no (en su versión 9).

1. /* Parámetro estándar */
   
2. animation:
   
3. 
   
4. /* Parámetros según navegador */
   
5. -webkit-animation:/* Chrome y Safari */
   
6. -moz-animation:/* Mozilla */
   

Como funciona

Las animaciones de CSS3 funcionan distinto a otros parámetros de CSS, debemos de establecer en el parámetro animation, además de la duración de la animación, y el número de repeticiones que hace, un keyframes, que es el fragmento de código donde se escribe la secuencia que hará el elemento con esta animación (es decir, se especifica que propiedades tendrá en cada momento, pudiendo modificar por ejemplo: el color, la altura, la posición...).

Como usarlo

Que es el keyframes

El keyframes es una propiedad de CSS3 que va independiente de los selectores (que son el conjunto de palabras que usamos para seleccionar elemento de una página, como: "#CONTENEDOR div.cuerpo"), esta propiedad también usa los prefijos de ciertos navegadores por motivos de compatibilidad. Esta propiedad precede a un contenedor que se abre y cierra con {}, es decir pondremos la propiedad keyframes y dentro de las llaves su contenido.

1. /* Parámetro estándar */
   
2. @keyframes [Nombre del keyfremes] {}
   
3. 
   
4. /* Parámetros según navegador */
   
5. @-webkit-keyframes [Nombre del keyfremes] {}/* Chrome y Safari */
   
6. @-moz-keyframes [Nombre del keyfremes] {}/* Mozilla */
   
7. 
   
8. 
   
9. /* Ejemplo de un keyframes */
   
10. @keyframes Ejemplo {
    

0%{width:100px}


100%{width:200px}


11. }
    

Contenido del keyframe

Dentro del keyframes debemos de especificar los keyframe de forma individual, donde se especifica el porcentaje del tiempo de la animación en el que cierta propiedad cambia y posteriormente se especifican las propiedades que cambian escribiéndolas dentro de llaves. Si queremos que empiece la animación de determinada forma debemos añadir un keyframe con el porcentaje del tiempo de la animación en el que empieza (en el caso del inicio es el 0%), de esta forma podemos especificar que en cualquier momento de la animación cambien los parámetros (en el 30% de la animación o en el 50% por ejemplo), asta máximo del 100%.
Nota: el punto 0% y el 100% son necesarios.

1. @keyframes Ejemplo {
   

0%{width:10%}


33%{width:20%}


66%{width:60%}


100%{width:10%}


2. }
   

Parámetros de animation

La propiedad animation puede contener distintos parámetros, como el nombre del keyframes que especifica su animación, su duración, el número de repeticiones y la función de tiempo.

1. animation: [Nombre del keyfremes] [Tiempo] [Número de repeticiones] [Función de Tiempo];

La propiedad animation tiene los siguientes parámetros:

Nombre del keyfremes: En este parámetro es donde establecemos el nombre del keyfremes, teniendo que ser igual al keyfremes que usemos para especificar la animación.

Tiempo: Este parámetro establece el tiempo que tarda en hacerse la animación en segundos (su unidad es s), es decir si queremos que dure un segundo tenemos que poner "1s".

Repeticiones: Con este parámetro podemos especificar con un número entero as veces que se repite la animación o hacer que se repita infinitamente estableciéndolo como "infinite".

Función de tiempo: Este parámetro establece la curva de aceleración de la transición, es decir, si empieza más rápido y o más despacio o es un avance lineal, sin variar la aceleración.
Este parámetro tiene varias funciones de tiempo preestablecida: lineal, ease, ease-in... Por defecto usa el ease, y es el más recomendado, consiste en un comience lento y una terminación lenta, acelerándose en la parte media.

Ejemplo en funcionamiento

Este ejemplo consiste en un DIV que se cambia de posición, aumenta y disminuye de tamaño y cambia de color. Gracias a las animaciones de CSS3 podemos hacerlo de una forma más fácil y eficiente.



El código HTML:

1. <div class="ANI_cont">
   

<div> <!-- Este DIV es el que animamos -->


</div>


2. </div>
   

El código CSS:

1. /* Este es el estilo del DIV que esta en el interior de div.ANI_cont */
   
2. .ANI_cont div{
   

width:10%;


height:60px;


margin-left:0%;


background:#0F0;


animation: Ejemplo 10s infinite ease;/* En esta animación se especifica que el keyfremes se llama "Ejemplo" y durara 10 segundos infinitamente */


3. }
   
4. 
   
5. @keyframes Ejemplo {
   

0%{width:10%}


33%{width:20%}


66%{width:60%}


100%{width:10%}


6. }
   

Crear animaciones completas

Para crear animaciones algo más complejas, que hagan una función útil suele ser necesario más de un elemento animado, que actúan conjuntamente.



El código HTML:

1. <div class="ANI_ex1">
   

<div class='progres'></div> <!-- Esta es la barra verde -->


<div class='gloss'></div> <!-- Este DIV contiene las barras en movimiento -->


2. </div>
   

El código CSS:

1. /* Este es el estilo del DIV que esta en el interior de div.ANI_cont */
   
2. .ANI_ex1{
   

width:60%;


height:20px;


margin:auto;


background:#999;


3. }
   
4. .ANI_ex1 .progres{
   

position:absolute;


height:100%;


margin:auto;


background:url(imgs/ANI_ex1_progres.jpg); /* Esta imagen es el degradado de la barra */


animation: ANI_pro 10s infinite ease;


5. }
   
6. 
   
7. @keyframes ANI_pro {
   

0%{width:0%}


100%{width:100%}


8. }
   
9. 
   
10. .ANI_ex1 .gloss{
    

position:absolute;


width:120%;


height:100%;


margin-left:-20px;


background:url(imgs/ANI_ex1_bars.png); /* Esta imagen muestra las barras diagonales que avanzan */


animation: ANI_bars 10s infinite ease;


11. }
    
12. 
    
13. @keyframes ANI_bars {
    

0%{margin-left:-20px}


100%{margin-left:0px}


14. }
    

Comentarios