La propiedad animation-timing-function en CSS se utiliza para especificar cómo la animación realiza transiciones a través de fotogramas clave. Es decir, se usa para especificar el movimiento de la animación durante las transiciones.
Sintaxis:
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end|steps(int, start | end) | cubic-bezier(n, n, n, n) | initial | inherit;
El valor de la propiedad:
- facilidad: con este valor de propiedad, la animación comienza lentamente, luego rápido y finalmente termina lentamente (esto es predeterminado).
- lineal: si se especifica este valor para la propiedad, la animación se reproduce con la misma velocidad de principio a fin.
- Facilidad de entrada: si se especifica este valor, la animación comienza con un inicio lento.
- salida gradual: si se especifica este valor para la propiedad, la animación se reproduce normalmente pero finaliza lentamente. Esto es similar a la facilidad de entrada.
- Facilidad de entrada y salida: con este valor de propiedad, la animación comienza y termina lentamente.
Ejemplo: programa HTML para ilustrar los valores de propiedad anteriores para la propiedad animation-timing-function.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | animation-timing-function Property
</title>
<style>
.geeks {
font-size: 40px;
text-align:center;
font-weight:bold;
color:#090;
padding-bottom: 5px;
font-family:Times New Roman;
}
.geeks1 {
font-size:17px;
font-weight:bold;
text-align:center;
font-family:Times New Roman;
}
h2 {
width: 350px;
animation-name: text;
animation-duration: 4s;
animation-iteration-count: infinite;
background-color: rgb(255, 210, 85);
}
#one {
animation-timing-function: ease;
}
#two {
animation-timing-function: linear;
}
#three {
animation-timing-function: ease-in;
}
#four {
animation-timing-function: ease-out;
}
#five {
animation-timing-function: ease-in-out;
}
@keyframes text {
from {
margin-left: 60%;
}
to {
margin-left: 0%;
}
}
</style>
</head>
<body>
<div class = "geeks">
GeeksforGeeks
</div>
<div class = "geeks1">
A computer science portal for geeks
</div>
<!-- For this the animation-timing-function will
be set to ease -->
<h2 id="one">
This text is ease.
</h2>
<!-- For this animation-timing-function will
be set to linear -->
<h2 id="two">
This text is linear.
</h2>
<!-- For this animation-timing-function will
be set to ease-in -->
<h2 id="three">
This text is ease-in.
</h2>
<!-- For this animation-timing-function will
be set to ease-out -->
<h2 id="four">
This text is ease-out.
</h2>
<!-- For this animation-timing-function will
be set to ease-in-out -->
<h2 id="five">
This text is ease-in-out.
</h2>
</body>
</html>
Navegador compatible: los navegadores compatibles con la propiedad animation-timing-function se enumeran a continuación:
- Google Chrome 43.0
- Internet Explorer 10.0
- Firefox 16.0
- Ópera 30.0
- Safari 9.0