Propiedad CSS transition-timing-function
La propiedad CSS transition-timing-function especifica la curva de velocidad de una transición a lo largo de su duración.
La propiedad transition-timing-function es una de las propiedades CSS3.
Tiene los siguientes valores:
- ease
- linear
- ease-in
- ease-out
- ease-in-out
- step-start
- step-end
| Valor inicial | ease |
|---|---|
| Se aplica a | Todos los elementos, pseudo-elementos ::before y ::after. |
| Heredado | No. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.transitionTimingFunction = "ease"; |
Sintaxis
Valores de transition-timing-function en CSS
css
transition-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;Ejemplo de transition-timing-function:
Ejemplo de código de transition-timing-function en CSS
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
padding: 2em;
width: 40px;
height: 40px;
left: 0;
background-color: #666;
position: relative;
transition-property: background-color, left;
transition-duration: 1s, 1s;
transition-timing-function: ease-out, cubic-bezier(.75, .3, .14, 1.12);
/* first value corresponds to the first transition-property value, and the second value corresponds to the second */
}
.example:hover .box {
left: 450px;
background-color: #ccc;
}
</style>
</head>
<body>
<h2>Transition-timing-function property example</h2>
<p>Hover over the element to see the effect</p>
<div class="example">
<div class="box"></div>
</div>
</body>
</html>Ejemplo de transition-timing-function con los valores "ease", "linear", "ease-in" y "ease-out":
Ejemplo de código de valores de transition-timing-function en CSS
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
padding: 2em;
width: 30px;
height: 30px;
left: 0;
background-color: #666;
border-radius: 50%;
position: relative;
transition-property: background-color, left;
transition-duration: 1s, 1s;
}
.container:hover .example {
left: 250px;
background-color: #ccc;
}
.el1 {
transition-timing-function: ease;
}
.el2 {
transition-timing-function: linear;
}
.el3 {
transition-timing-function: ease-in;
}
.el4 {
transition-timing-function: ease-out;
}
</style>
</head>
<body>
<h2>Transition-timing-function property example</h2>
<div class="container">
<p>
<code>transition-timing-function: ease;</code>
</p>
<div class="example el1"></div>
<p>
<code>transition-timing-function: linear;</code>
</p>
<div class="example el2"></div>
<p>
<code>transition-timing-function: ease-in;</code>
</p>
<div class="example el3"></div>
<p>
<code>transition-timing-function: ease-out;</code>
</p>
<div class="example el4"></div>
</div>
</body>
</html>Ejemplo de transition-timing-function con los valores "step-start" y "step-end":
Otro ejemplo de transition-timing-function en CSS
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
padding: 2em;
width: 30px;
height: 30px;
left: 0;
background-color: #666;
border-radius: 50%;
position: relative;
transition-property: background-color, left;
transition-duration: 1s, 1s;
}
.container:hover .example {
left: 250px;
background-color: #ccc;
}
.el1 {
transition-timing-function: step-start;
}
.el2 {
transition-timing-function: step-end;
}
</style>
</head>
<body>
<h2> Transition-timing-function property example</h2>
<div class="container">
<p>
<code>transition-timing-function: step-start;</code>
</p>
<div class="example el1"></div>
<p>
<code>transition-timing-function: step-end;</code>
</p>
<div class="example el2"></div>
</div>
</body>
</html>Valores
| Valor | Descripción |
|---|---|
| ease | El efecto de transición comienza lentamente, luego se acelera y termina lentamente. Este es el valor predeterminado. |
| linear | El efecto de transición avanza a velocidad constante desde el inicio hasta el final. |
| ease-in | El efecto de transición comienza lentamente y se acelera hacia el final. |
| ease-out | El efecto de transición comienza rápidamente, pero se desacelera al final. |
| ease-in-out | El efecto de transición comienza lentamente y termina lentamente. |
| step-start | Equivalente a steps(1, start). |
| step-end | Equivalente a steps(1, end). |
| steps(int,start|end) | Especifica una función de pasos con dos parámetros. El primer parámetro especifica el número de intervalos en la función. Debe ser mayor que 0. El segundo parámetro es el valor "start" o "end", y especifica el punto en el que ocurre el cambio de valores dentro del intervalo. Si no se aplica el segundo parámetro, se asigna el valor "end". |
| cubic-bezier (n,n,n,n) | Especifica una curva de Bézier cúbica para definir la aceleración y desaceleración de la transición. |
| initial | Hace que la propiedad utilice su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
La propiedad CSS transition-timing-function tiene los siguientes valores, excepto