libro de referencia CSS

reglas CSS @

propiedades CSS completas

CSS3 backface-Atributo visibility CSS3 animation-play-Atributo state

CSS3 animation-timing-function 属性使用方法及示例

CSS3 animation-timing-function属性指定CSS动画在每个周期的持续时间内应如何进行。

下表总结了此属性的用法上下文和版本历史记录。

默认值：	ease
适用于：	所有元素::before和::after 伪元素
继承：	没有
可动画制作：	否。请参见动画属性。
版本：	CSS3的新功能
JavaScript 语法:	object　　　object.style.animationTimingFunction="linear"

animation-timing-function的使用语法

此属性的语法如下：

animation-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 animation-timing-Atributo function.

Ejemplo

.box　{
　　　　width:　50px;
　　　　height:　50px;
　　　　background:　red;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation-name:　moveit;
　　　　-webkit-animation-duration:　2s;
　　　　-webkit-animation-timing-function:　ease-in;
　　　　
　　　　animation-name:　moveit;
　　　　animation-duration:　2s;
　　　　animation-timing-function:　ease-in;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

Prueba aquí‹/›

Valor del atributo

La siguiente tabla describe los valores de este atributo.

Valores	Descripción
linear	Especificar que la animación se mueva a una velocidad constante desde su estado inicial hasta su 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	Especificar que la animación comience lentamente, luego se acelere gradualmente hasta alcanzar su estado final y luego detenerse repentinamente.
ease-out	Especificar que la animación comience rápidamente y luego se desacelere gradualmente cuando se acerque a su estado final.
ease-in-out	Especificar que la animación comience lentamente cuando se acerca a su estado final, luego se acelere y luego se desacelere.
`cubic-bezier(n,n,n,n)`	Definir una curva de Bézier de tercer grado. También conocida como curva de velocidad. Los valores posibles son de 0 a1valores entre
initial	Establecer este atributo en su valor predeterminado.
inherit	Si se especifica, el elemento asociado utiliza el animation del elemento padre-timing-Valor de cálculo del atributo function.

Compatibilidad del navegador

animation-timing-Compatibilidad del atributo function del navegador, todos los navegadores principales admiten este atributo.

	Firefox 5+ ^-moz-，15 + Google Chrome 4+ ^-webkit- Internet Explorer 10+ Apple Safari 4+ ^-webkit- Opera 12+ ^-o-，15+ ^-webkit-

Leer más

Consulte los siguientes tutoriales:CSS3Animación。

Atributos y reglas relacionados:animation，animation-name，animation-duration，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode，animation-play-state，@keyframes。

CSS3 backface-Atributo visibility CSS3 animation-play-Atributo state