manuel de référence CSS

règles dans CSS @

大全 des attributs CSS

CSS3 backface-Attribut visibility CSS3 animation-play-Attribut 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

Les exemples suivants montrent comment utiliser animation-timing-attribut function.

Exemple

.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%;}
}

Vérifiez ici‹/›

Valeur de l'attribut

Le tableau suivant décrit les valeurs de cet attribut.

Valeur	Description
linear	Spécifiez que l'animation commence à une vitesse constante de son état initial à son état final.
ease	Similaire à淡入淡出, bien que son accélération soit plus rapide au début et qu'elle ait déjà commencé à ralentir à proximité du milieu.
ease-in	Spécifiez que l'animation commence lentement, s'accélère progressivement jusqu'à atteindre l'état final et s'arrête brusquement.
ease-out	Spécifiez que l'animation démarre rapidement, puis ralentit progressivement lorsqu'elle approche de son état final.
ease-in-out	Spécifiez que l'animation commence lentement, puis s'accélère puis ralentit lorsqu'elle approche de son état final.
`cubic-bezier(n,n,n,n)`	Définir une courbe de Bézier en trois points. Aussi appelée courbe de vitesse. Les valeurs possibles sont de 0 à1entre les valeurs.
initial	Réinitialisez cette propriété à sa valeur par défaut.
inherit	Si spécifié, l'élément associé utilise l'animation de son élément parent-timing-Valeur calculée de l'attribut function.

Compatibilité du navigateur

animation-timing-Compatibilité des navigateurs pour l'attribut function, tous les navigateurs populaires prennent en charge cet attribut.

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

Pour plus de lecture

Veuillez consulter les tutoriels suivants :CSS3Animation。

Attributs et règles associés :animation，animation-name，animation-duration，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode，animation-play-state，@keyframes。

CSS3 backface-Attribut visibility CSS3 animation-play-Attribut state