manual de referencia de CSS

CSS @reglas (RULES)

大全 de propiedades CSS

CSS unicode-Atributo bidi CSS3 transition-Atributo property

CSS3 transition-timing-Método de uso y ejemplo de atributo función

transition-timing-La función atributo especifica la velocidad de transición del efecto de cambio. Este atributo permite un efecto de transición que puede cambiar la velocidad de su duración.

La siguiente tabla describe el uso y el historial de versiones de este atributo, así como la sintaxis de uso en el script JavaScript.

Valor predeterminado:	ease
Aplicable a:	Todos los elementos::before y::after Elementos pseudo
Herencia:	Ninguno
Animación posible:	No.Ver: Atributos de animación.
Versión:	CSS3nueva función
Sintaxis de JavaScript:	objeto.style.transitionTimingFunction="ease-in"

transition-timing-Uso de la sintaxis de la función

La sintaxis de este atributo es la siguiente:

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | initial | inherit

El siguiente ejemplo muestra cómo usar transition-timing-Atributo function.

Ejemplo

button {
　　　　background: #fd7c2a;
　　　　/*　Para Safari　3.0+　*/
　　　　-webkit-transition-property: background;
　　　　-webkit-transition-duration:　2s;
　　　　　　-webkit-transition-timing-function: linear;
　　　　
　　　　transition-property: background;
　　　　transition-duration:　2s;
　　　　　　transition-timing-function: linear;
}
button:hover {
　　　　background: #3cc16e;
}

Ver aquí‹/›

Valores del atributo

La tabla a continuación describe los valores de este atributo.

Valores	Descripción
linear	Especifica una transición a velocidad constante desde el estado inicial al estado final.
ease	Similar a fade in y fade out, aunque acelera más rápidamente al principio y ya ha comenzado a desacelerarse cerca del medio.
ease-in	Especifica que la transición comience lentamente, luego se acelere gradualmente hasta alcanzar el estado final y luego se detenga repentinamente.
ease-out	Especifica que la transición comience rápidamente y luego se desacelere al acercarse a su estado final.
ease-in-out	Especifica que la transición comience lentamente, luego se acelere y luego se desacelere al alcanzar el estado final.
cubic-bezier(n,n,n,n)	Define una curva bezier de tercer grado. También conocida como curva de velocidad. Los valores posibles son de 0 a1números entre
initial	Establezca este atributo en su valor predeterminado.
inherit	Si se especifica, los elementos relacionados adoptan el transition del elemento padre-timing-Valor del atributo function.

Compatibilidad del navegador

transition-timing-La compatibilidad del atributo function del navegador, los números en la tabla a continuación representan la versión mínima del navegador que admite el atributo; todos los navegadores principales admiten este atributo.

	Firefox 4+ ^-moz-,16 + Google Chrome 4+ ^-webkit-,26 + Internet Explorer 10+ Apple Safari 3.1+ ^-webkit-,6.1+ Opera 10.5+ ^-o-,12.1+

Leer más

Consulte la siguiente guía:CSS3 Transiciones.

Atributos relacionados:transition,transition-delay,transition-property,transition-duration.

CSS unicode-Atributo bidi CSS3 transition-Atributo property