Similar a las transiciones disponemos de dos propiedades para definir la función de transición y el tiempo que debe esperar para comenzar la animación:
Elemento {
animation-timing-function: [función de transición];
animation-delay: [tiempo de demora para iniciar la animación];
}
Los valores posibles para la propiedad animation-timing-function:
El problema del concepto anterior definimos la función de animación "linear" y un tiempo de retardo de 2 segundos:
#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;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-webkit-animation-name: animacion1;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-o-animation-name: animacion1;
-o-animation-duration: 4s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
}
@-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;
}
}