英[ˈ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
CSS-Animations-Timing-Funktionseigenschaft Syntax
Was ist die Animation-Timing-Funktion?
animation-timing-function ist ein Animationsattribut von CSS, das verwendet wird, um die Geschwindigkeitskurve der Animation anzugeben, also die Art und Weise, wie die Animation abgespielt wird, um die Änderungen der Animation flüssiger zu gestalten.
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 von Anfang bis Ende gleich.
ease Standard. Die Animation beginnt langsam, beschleunigt dann, verlangsamt sich dann und endet schließlich.
Einfache Animation beginnt bei niedriger Geschwindigkeit.
ease-out Die Animation endet mit niedriger Geschwindigkeit.
Ease-in-out-Animation beginnt und endet mit niedriger Geschwindigkeit.
cubic-bezier(n,n,n,n) sein eigener Wert in der Kubik-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.
CSS-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