Animaciones (sintaxis básica)

Las animaciones en css3 nos permiten hacer cosas que con las transiciones no alcanzamos y nos quedamos cortos.

La sintaxis básica para una animación:

Elemento {
      animation-name: [nombre de la animación];
      animation-duration: [tiempo de duración]; 
}

@ keyframes [nombre de la animación] {
  from {
    [propiedades y valores del estado inicial de la animación]
  }
  to {
    [propiedades y valores del estado final de la animación]
  }
}

Veamos un ejemplo donde emplearemos la sintaxis expuesta, a este momento solo el FireFox, Chrome y Opera implementan las animaciones. Mostraremos un recuadro con un texto que parta de la columna 30px y avance hasta la columna 300px y que cambie del color gris al color amarillo:

#recuadro1{
  left:30px;
  position:relative;
  border-radius: 20px;  
  background-color:#ddd;
  width:200px;
  height:100px;
  padding:4px;
  -moz-animation-name: animacion1;
  -moz-animation-duration: 4s;
  -webkit-animation-name: animacion1;
  -webkit-animation-duration: 4s;
  -o-animation-name: animacion1;
  -o-animation-duration: 4s;
}

@-moz-keyframes animacion1 {
  from {
    left:30px;
    background-color:#ddd;
  }
  to {
    left:300px; 
    background-color:#ff0;
  }
}

@-webkit-keyframes animacion1 {
  from {
    left:30px;
    background-color:#ddd;
  }
  to {
    left:300px; 
    background-color:#ff0;
  }
}

@-o-keyframes animacion1 {
  from {
    left:30px;
    background-color:#ddd;
  }
  to {
    left:300px; 
    background-color:#ff0;
  }
}

Como podemos ver inicializamos las propiedades animation-name con el nombre de la animación:

 -moz-animation-name: animacion1;
 -webkit-animation-name: animacion1;
 -o-animation-name: animacion1;

Y la propiedad animation-duration con el tiempo duración de la animación:

  -moz-animation-duration: 4s;
  -webkit-animation-duration: 4s;
  -o-animation-duration: 4s;

La sintaxis para especificar la animación propiamente dicha es idéntica para cada navegador pero como debemos utilizar el prefijo luego creamos tres:

@-moz-keyframes animacion1 {
  from {
    left:30px;
    background-color:#ddd;
  }
  to {
    left:300px; 
    background-color:#ff0;
  }
}

En la parte del from indicamos el estado inicial del elemento (en este caso 30 píxeles respecto a la izquierda y de color gris (#ddd)), luego en la sección del to indicamos los valores finales que debe tomar el elemento (300 píxeles respecto a la izquierda y de color amarillo(#ff0))


Retornar