Búsqueda personalizada
 
 
 
 
Animaciones (animation-iteration-count y animation-direction)
   

Otras dos propiedades muy importantes para crear animaciones con css3 son animation-iteration-count y animation-direction:

Elemento {
      animation-iteration-count: [cantidad de veces a repetir la animacin o "infinite"];
      animation-direction: ["normal" o "alternate"]; 
}

Si queremos que la animacin se repita solo tres veces luego indicamos en la propiedad animation-iteration-count dicho valor:

  -moz-animation-iteration-count: 3;

En cambio si queremos que se repita siempre luego especificamos el valor "infinite":

  -moz-animation-iteration-count: infinite;

La propiedad animation-direction indica como debe repetirse la animacin, puede tomar el valor "normal" con lo que la animacin cada vez que finaliza comienza desde el principio. Pero si inicializamos con el valor "alternate" cuando finaliza la animacin comienza desde el final hasta el principio:

  -moz-animation-direction: alternate;

El ejemplo del concepto anterior que muestra un recuadro con un texto que se desplaza de izquierda a derecha cambiando su color, pero ahora indicando que se repita en forma indefinida y con el valor "alternate" en la propiedad animation-direction:

#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;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: alternate;
  -webkit-animation-name: animacion1;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -o-animation-name: animacion1;
  -o-animation-duration: 4s;
  -o-animation-iteration-count: infinite;
  -o-animation-direction: alternate;
}

@-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