Búsqueda personalizada
 
 
 
 
Animaciones (sintaxis básica)
   

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

La sintaxis bsica para una animacin:

Elemento {
      animation-name: [nombre de la animacin];
      animation-duration: [tiempo de duracin]; 
}

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

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 animacin:

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

Y la propiedad animation-duration con el tiempo duracin de la animacin:

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

La sintaxis para especificar la animacin propiamente dicha es idntica 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 pxeles respecto a la izquierda y de color gris (#ddd)), luego en la seccin del to indicamos los valores finales que debe tomar el elemento (300 pxeles respecto a la izquierda y de color amarillo(#ff0))

 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion