Función de temporización de transición - Trucos CSS

Tabla de contenido

Usando pasos () y curvas de Bézier

La transition-timing-functionpropiedad, que normalmente se usa como parte de la transitionabreviatura, se usa para definir una función que describe cómo se desarrollará una transición durante su duración, permitiendo que una transición cambie de velocidad durante su curso.

.example ( transition-timing-function: ease-out; )

Estas funciones de temporización se denominan comúnmente funciones de aceleración y se pueden definir mediante un valor de palabra clave predefinido, una función escalonada o una curva de Bézier cúbica.

Los valores de palabras clave predefinidos permitidos son:

facilidad
lineal
facilidad en
Facilitarse
facilidad de entrada y salida
paso a paso
escalón

Para algunos valores, el efecto puede no ser tan obvio a menos que la duración de la transición se establezca en un valor mayor.

Cada una de las palabras clave predefinidas tiene un valor de curva de Bézier cúbico equivalente o un valor de función escalonada equivalente. Por ejemplo, los siguientes dos valores de función de temporización serían equivalentes entre sí:

.example ( transition-timing-function: ease-out; ) .example-2 ( transition-timing-function: cubic-bezier(0, 0, 0.58, 1); )

Como lo harían los siguientes dos:

.example ( transition-timing-function: step-start; ) .example-2 ( transition-timing-function: steps(1, start); )

Usando pasos () y curvas de Bézier

La steps()función le permite especificar intervalos para la función de temporización. Toma uno o dos parámetros, separados por una coma: un entero positivo y un valor opcional de starto end. Si no se incluye un segundo parámetro, se utilizará de forma predeterminada end.

Para comprender las funciones de paso a paso, aquí hay una demostración que se usa steps(4, start)para el cuadro de la izquierda y steps(4, end)para el cuadro de la derecha (pase el mouse sobre un cuadro o recargue el marco para ver las transiciones):

¡Mira este bolígrafo!

Cuando startse especifica, el cambio de valores ocurre al comienzo de cada intervalo, mientras que endhace que el cambio de valores ocurra al final de cada intervalo.

Una mirada detallada a los valores de la curva de Bézier está más allá del alcance de esta referencia; sin embargo, consulte las referencias en la sección de enlaces relacionados para obtener herramientas que demuestran visualmente cómo funcionan estos valores.

Para la compatibilidad en todos los navegadores compatibles, se requieren prefijos de proveedor, con la sintaxis estándar declarada en último lugar:

.example ( -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; )

IE10 (la primera versión estable de IE compatible transition-timing-function) no requiere el -ms-prefijo.