Animaciones (definición de más de 2 keyframes)

Hasta ahora hemos indicado en la animación solo 2 keyframes (el inicial y el final), pero para animaciones más complejas es posible que necesitemos más de 2 keyframes, para esto tenemos la siguiente sintaxis:

@-moz-keyframes [nombre de la animación] {
  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 perímetro de un rectángulo 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;
  }
}

Retornar