 |
Animaciones (animation-timing-function y animation-delay)
La función de tiempo de animación especifica la curva de velocidad de una animación. La curva de velocidad define el TIEMPO que usa una animación para cambiar de un conjunto de estilos CSS a otro. La curva de velocidad se utiliza para realizar cambios sin problemas.
Para animaciones con keyframes, la timing function se aplica entre los keyframes en lugar de sobre toda la animación. Es decir, se aplica al comienzo del keyframe y al final del mismo. Una timing function definida dentro de un keyframe afecta a ese keyframe.
Si no está definida para el keyframe, se aplica la timing function para la animación en general.
A menudo, es conveniente usar la propiedad abreviada animation para ajustar las propiedades de animación una sola vez.
Opciones
- linear La animación tiene la misma velocidad de principio a fin.
- ease Valor por defecto. La animación tiene un comienzo lento, luego rápido, antes de que termine lentamente.
- ease-in La animación tiene un comienzo lento.
- ease-out La animación tiene un final lento.
- ease-in-out La animación tiene un comienzo lento y un final lento.
- step-start Equivalente a pasos (1, inicio)
- step-end Equivalente a pasos (1, fin)
- steps(int,start|end) Especifica una función paso a paso, con dos parámetros. El primer parámetro especifica el número de intervalos en la función. Debe ser un número entero positivo (mayor que 0). El segundo parámetro, que es opcional, es el valor "inicio" o "final", y especifica el punto en el que se produce el cambio de valores dentro del intervalo. Si se omite el segundo parámetro, se le asigna el valor "fin"
- cubic-bezier(n,n,n,n) Defina sus propios valores en la función cubic-bezier. Los valores posibles son valores numéricos de 0 a 1
Ejemplos
<html>
<head>
<style>
div {
width: 300px;
height: 50px;
background: red;
color: white;
font-weight: normal;
position: relative;
animation: mymove 5s infinite;
}
#div1 {animation-timing-function: linear;background: red;}
#div2 {animation-timing-function: ease; background: gold;}
#div3 {animation-timing-function: ease-in; background: lightblue;}
#div4 {animation-timing-function: ease-out; background: lightgreen;}
#div5 {animation-timing-function: ease-in-out;background: olive;}
#div6 {animation-timing-function: steps(4, end);background: navy;}
#div7 {animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);background: coral;}
#div8 {animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);background: darkmagenta;}
@keyframes mymove {
from {left: 0px;}
to {left: 500px;}
}
</style>
</head>
<body>
<p><strong>Nota:</strong> La propiedad animation-timing-funtion no es compatible con Internet Explorer 9 y versiones anteriores.</p>
<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>
<div id="div6">steps(4, end)</div>
<div id="div7">cubic-bezier(0.1, 0.7, 1.0, 0.1)</div>
<div id="div8"><b>Multiple animations</b><br>ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)</div>
</body>
</html>
Nota: La propiedad animation-timing-funtion no es compatible con Internet Explorer 9 y versiones anteriores.
ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)
La propiedad animation-delay especifica un retraso para el inicio de una animación. El valor de retardo de la animación se define en segundos (s) o milisegundos (ms).
El valor 0, que es el valor por defecto, indica que la animación debería comenzar inmediatamente. Usando otro valor, definimos el retardo entre el momento en que el elemento recibe la animación y el comienzo de la secuencia de la misma.
Si especificamos un valor negativo, la animación comenzará inmediatamente, pero no desde el principio de la misma, sino desde el punto que le hemos indicado. Por ejemplo, si ponemos un retardo de -1s, la animación se iniciará inmediatamente pero comenzará en el segundo 1 de la secuencia.
Si se especifica un valor negativo para el retraso de la animación, pero el valor de inicio es implícito, el valor inicial es tomado desde el momento en que la animación es aplicada al elemento.
- time Opcional. Define la cantidad de segundos (s) o milisegundos (ms) que se deben esperar antes de que comience la animación. El valor predeterminado es 0. Se permiten valores negativos. Si usa valores negativos, la animación comenzará como si ya se hubiera estado reproduciendo durante N segundos / milisegundos.
<html>
<head>
<style>
#op2 {
width: 300px;
height: 50px;
background: red;
position: relative;
animation: mymove1 5s infinite;
animation-delay: 2s; } @keyframes mymove1 {
from {left: 0px;}
to {left: 500px;}
} </style>
</head>
<body>
<p><Inicia la animación después de 2 segundos:</p>
<p><strong>Nota:</strong> La propiedad animation-delay no es compatible con Internet Explorer 9 y versiones anteriores.</p>
<div id="op2"></div>
</body>
</html>
Inicia la animación después de 2 segundos:
Nota: La propiedad animation-delay no es compatible con Internet Explorer 9 y versiones anteriores.