La propiedad de función de tiempo de transición de CSS describe cómo se mostrará una transición a lo largo de su duración. Esto permitirá que una transición cambie su velocidad y diferentes propiedades de movimiento durante su curso. La función de tiempo de transición especifica el tiempo que usa una animación para cambiar de un conjunto de transiciones CSS a otro. El valor predeterminado de la función de tiempo de transición es ‘facilidad’ . Este valor establece la animación en un comienzo lento, luego, después de un período de tiempo, la velocidad aumenta y antes de que finalice, la velocidad vuelve a ser lenta.
Sintaxis:
animation-timing-function: <easing-function>|ease|linear|ease-in
|ease-out|ease-in-out|cubic-bezier(p1, p2, p3, p4)|steps(n, <jumpterm>)
|step-start|step-end|initial;
Son muchos los valores diferentes que le podemos dar a esta propiedad, algunos de ellos son:
- lineal : en este, la animación tiene la misma velocidad de principio a fin.
- Facilidad de entrada : es similar a Facilidad solo que el final de la animación es rápido.
- Eaceleración : esto también es similar a Eaceleración, solo que el inicio de la animación es rápido.
- initial : esto establece la propiedad en su valor predeterminado. El valor inicial de este valor de propiedad es la facilidad.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 75px;
width: 75px;
background: yellowgreen;
color: red;
transition: width 5s;
}
#div1 {
transition-timing-function: linear;
}
#div2 {
transition-timing-function: ease;
}
#div3 {
transition-timing-function: ease-in;
}
#div4 {
transition-timing-function: ease-out;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>The transition-timing-function Property.</h1>
<p>
This is an example for linear
value in transition-timing-function property.
<div id="div1">linear</div>
</p>
<p>
This is an example for ease
value in transition-timing-function property.
<div id="div2">ease</div>
</p>
<p>
This is an example for ease-in
value in transition-timing-function property
<div id="div3">ease-in</div>
</p>
<p>
This is an example for ease-out
value in transition-timing-function property.
<div id="div4">ease-out</div>
</p>
</body>
</html>
Producción: 
Navegadores compatibles:
- Google cromo 26
- explorador de Internet 10
- Firefox 16
- Safari 9
- Ópera 12.1
- Borde 12
Publicación traducida automáticamente
Artículo escrito por riteshparkhi9 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA