CSS Referenzhandbuch

CSS @Regeln (RULES)

CSS Eigenschaften vollständiges Verzeichnis

CSS3 backface-visibility Eigenschaft CSS3 animation-play-state Eigenschaft

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

Der folgende Beispiel zeigt, wie die animation verwendet wird.-timing-function-Eigenschaft.

Beispiel

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

Testen Sie es heraus‹/›

Attribute-Werte

Die folgende Tabelle beschreibt die Werte dieses Attributes.

Werte	Beschreibung
linear	Bestimmt, dass die Animation mit konstanter Geschwindigkeit von ihrem Anfangszustand in ihren Endzustand übergeht.
ease	Ähnlich wie Fade In/Fade Out, obwohl es sich schneller beschleunigt und bereits in der Nähe des Mittelpunkts abgebremst hat.
ease-in	Bestimmt, dass die Animation langsam beginnt, sich beschleunigt und dann abrupt stoppt, wenn sie ihren Endzustand erreicht.
ease-out	Bestimmt, dass die Animation schnell beginnt und sich dann allmählich verlangsamt, wenn sie ihrem Endzustand näherkommt.
ease-in-out	Bestimmt, dass die Animation langsam beginnt, sich beschleunigt und dann verlangsamt, wenn sie ihrem Endzustand näherkommt.
`cubic-bezier(n,n,n,n)`	Definiert eine dritteBezier-Kurve. Auch bekannt als Geschwindigkeitskurve. Mögliche Werte sind von 0 bis1Zwischen den Werten.
initial	Setzen Sie diesen Wert auf seinen Standardwert.
inherit	Wenn angegeben, wird der verknüpfte Element die animation des übergeordneten Elements verwenden.-timing-function-Eigenschaft: Berechneter Wert.

Browserkompatibilität

animation-timing-function-Eigenschaft: Kompatibilität der Browser, alle gängigen Browser unterstützen diese Eigenschaft.

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

Weiterführende Lektüre

Bitte beziehen Sie sich auf die folgenden Tutorials:CSS3Animation.

Zusammenhängende Eigenschaften und Regeln:animation,animation-name,animation-duration,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode,animation-play-state,@keyframes.

CSS3 backface-visibility Eigenschaft CSS3 animation-play-state Eigenschaft