英[?ta?m?? ] US [?ta?m??]
n.Timing; Zeitsteuerung; LichtverteilungFunktion
Englisch [?f??k?n] US [?f??k??n]n. Funktion, Rolle; Variable, Funktion ; Position; Hauptpartei
vi.Haben oder Funktion erfüllen;Dritte Person Singular: Funktionen Plural: Funktionen Pr?sens Partizip: Funktioniert Partizip Perfekt: Funktioniert
CSS3-Animations-Timing-Funktionseigenschaft Syntax
Funktion: Animations-Timing-Funktion gibt die Geschwindigkeitskurve der Animation an. Die Geschwindigkeitskurve definiert, wie lange es dauert, bis die Animation von einem CSS-Stilsatz zum anderen wechselt. Geschwindigkeitskurven werden verwendet, um ?nderungen sanfter zu gestalten.
Syntax: animation-timing-function: value;
Beschreibung: animation-timing-function verwendet eine mathematische Funktion namens Kubische Bezier-Funktion, um eine Geschwindigkeitskurve zu generieren. Sie k?nnen in dieser Funktion Ihre eigenen Werte oder vordefinierte Werte verwenden: linear Die Geschwindigkeit der Animation ist vom Anfang bis zum Ende gleich. Leichtigkeit Standard. Die Animation beginnt langsam, beschleunigt dann, verlangsamt sich dann und endet schlie?lich. Die Easy-In-Animation beginnt langsam. Ease-Out Die Animation endet mit langsamer Geschwindigkeit. Die Easy-In-Out-Animation beginnt und endet mit langsamer Geschwindigkeit. kubisch-bezier(n,n,n,n) seinen eigenen Wert in der kubischen-Bezier-Funktion. M?gliche Werte sind numerische Werte von 0 bis 1.?
Hinweis: Internet Explorer 9 und frühere Versionen unterstützen das Attribut ?animation-timing-function“ nicht.
Verwenden Sie das Attribut ?animation-timing-function“ in CSS3, um die Animationsgeschwindigkeit anzupassen. Es kann die Animationsgeschwindigkeit auf eine konstante Geschwindigkeit einstellen, bei niedriger Geschwindigkeit beginnen, bei niedriger Geschwindigkeit enden, bei niedriger Geschwindigkeit beginnen und enden, langsam Erst, dann schnell und dann langsamer, oder Wert selbst festlegen
CSS3-Animations-Timing-Funktionseigenschaft Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
animation-timing-function:linear;
/* Safari and Chrome */
-webkit-animation:mymove 5s infinite;
-webkit-animation-timing-function:linear;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注釋：</strong>Internet Explorer 9 以及更早的版本不支持 animation-timing-function 屬性。</p>
<div></div>
</body>
</html>Instanz ausführen ?
Klicken Sie auf die Schaltfl?che ?Instanz ausführen“, um die Online-Instanz anzuzeigen