Búsqueda personalizada
 
 
 
 
Animaciones (definición de más de 2 keyframes)
   

Hasta ahora hemos indicado en la animacin solo 2 keyframes (el inicial y el final), pero para animaciones ms complejas es posible que necesitemos ms de 2 keyframes, para esto tenemos la siguiente sintaxis:

@-moz-keyframes [nombre de la animacin] {
  0%{
    [propiedades y valores]  
  }
  [valor en porcentaje]%{
    [propiedades y valores]  
  }
  [valor en porcentaje]%{
    [propiedades y valores]  
  }
  100%{
    [propiedades y valores]  
  }
}

Por ejemplo si queremos 5 frames claves que nos permitan desplazar un recudrado sobre un permetro de un rectngulo luego tenemos que especificar los siguientes frames:

#recuadro1{
  left:30px;
  top:30px;
  position:relative;
  border-radius: 20px;  
  background-color:#ddd;
  width:100px;
  height:100px;
  padding:4px;
  -moz-animation-name: animacion1;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-name: animacion1;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -o-animation-name: animacion1;
  -o-animation-duration: 4s;
  -o-animation-iteration-count: infinite;
}
@-moz-keyframes animacion1 {
  0%{
    left:30px;
    top:30px;
  }
  25%{
    left:300px; 
    top:30px;
  }
  50%{
    left:300px;
    top:200px;   
  }
  75%{
    left:30px;
    top:200px;
  }
  100%{
    left:30px;
    top:30px;
  }
}

@-webkit-keyframes animacion1 {
  0%{
    left:30px;
    top:30px;
  }
  25%{
    left:300px; 
    top:30px;
  }
  50%{
    left:300px;
    top:200px;   
  }
  75%{
    left:30px;
    top:200px;
  }
  100%{
    left:30px;
    top:30px;
  }
}

@-o-keyframes animacion1 {
  0%{
    left:30px;
    top:30px;
  }
  25%{
    left:300px; 
    top:30px;
  }
  50%{
    left:300px;
    top:200px;   
  }
  75%{
    left:30px;
    top:200px;
  }
  100%{
    left:30px;
    top:30px;
  }
}

 

 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion