CSS3-Animations-Timing-Funktionseigenschaft
Übersetzungsergebnisse：
英[ˈ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: FunktioniertCSS3-Animations-Timing-FunktionseigenschaftSyntax
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-FunktionseigenschaftBeispiel
<!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