Animaciones con CSS3

En CSS3 es posible realizar animaciones de varias maneras:

  • Transiciones
  • Fotogramas clave

Transiciones

Utilizamos la propiedad transition, y permite indicar qué propiedad css queremos cambiar, y en cuanto tiempo ante un cierto evento.

Por ejemplo, prueba el siguiente ejemplo:

<!DOCTYPE html> <html> <head> <title>Transiciones</title> <meta charset="utf-8"/> <style> div.caja-animada{ width:100px; height:100px; background-color:gray; transition-duration:0.5s; transition-delay:1s; transition-property: width, height; transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); /* -webkit-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); -moz-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); -o-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); / * Obtenido http://matthewlein.com/ceaser/ */ } div.caja-animada:hover{ width:200px; height:200px; } </style> </head> <body> <div class="caja-animada"> A. </div> </body> </html>

La propiedad más difícil de entender es transition-timing-function, especialmente si se utilizan curvas de Bezier. En http://www.sitepoint.com/css3-transitions-cubic-bezier-timing-function/ podemos obtener más información sobre este asunto.

En http://www.cristalab.com/tutoriales/animacion-en-css3-after-before-y-hover-c113195l/ puedes encontrar algunos efectos interesantes basados en transiciones.

Transformaciones

Una característica que suele usarse en combinación con las transiciones, son las transformaciones. Se controlan con la propiedad transform.

Existen varios tipos de transformaciones:

  • rotate: gira un elemento
  • skew: inclina un elemento
  • scale: escala un elemento
  • translate: traslada un elemento de un punto a otro
  • matrix: permite realizar transformaciones matrices

Habitualmente usaremos las cuatro primeras ya que matrix implica cierta complejidad matemática. Podemos probar sus efectos en diferentes páginas web, como por ejemplo http://ds-overdesign.com/transform/matrix3d.html

Además de indicar el tipo de transformación, debemos indicar en qué grado se producirá. Observa las siguientes imágenes:

transform:rotate(grados)
transform:skew(gradosX,gradosY)
transform:scale(escalaX,escalaY)
transform:translate(desplazamientoX,desplazamientoY)
<!DOCTYPE html> <html> <head> <title>Transiciones</title> <meta charset="utf-8"/> <style> div{ width:100px; line-height:100px; text-align:center; font-family:sans-serif; color:white; background-color:red; margin:50px; } .rotate:hover{ transform:rotate(25deg); } .skew:hover{ transform:skew(15deg,0deg); } .scale:hover{ transform:scale(1.5,0.5); } .translate:hover{ transform:translate(10px,10px); } </style> </head> <body> <h1>Pasa el ratón por encima de cada caja</h1> <div class="no_transformado"> modelo </div> <div class="rotate"> rotate </div> <div class="skew"> skew </div> <div class="scale"> scale </div> <div class="translate"> translate </div> </body> </html>

Fotogramas clave

Mediante los "Key frames" (fotogramas clave) podemos establecer un recorrido planificado por varios cambios de atributos sobre un mismo elemento. Observa el siguiente ejemplo:

<!DOCTYPE html> <html> <head> <title>Transiciones</title> <meta charset="utf-8"/> <style> div{ width:100px; line-height:100px; text-align:center; font-family:sans-serif; color:white; background-color:red; margin:50px; } div:hover{ animation-name: mianimacion; animation-duration: 2s; animation-timing-function: ease-in-out; animation-delay: 1s; animation-iteration-count: 2; } @keyframes mianimacion{ 0%{ transform:rotate(0deg); } 20%{ transform:rotate(25deg); } 50%{ transform:rotate(0deg); background-color:red; } 75%{ transform:translate(100px,100px); background-color:blue; } 100%{ transform:translate(0px,0px); } } </style> </head> <body> <h1>Pasa el ratón por encima de la caja</h1> <div class="no_transformado"> keyframes </div> </body> </html>

Como podemos ver hay que definir los fotogramas clave en una sección @keyframes. Los diferentes puntos de ruptura de la animación, se determinan indicando un porcentaje, indicando en qué momento se producirán los cambios indicados.

Para aplicar una animación a una caja, debemos aplicarla mediante los atributos siguientes: