Heim > Artikel > Web-Frontend > So verwenden Sie die CSS-Eigenschaft „animation-timing-function“.
So verwenden Sie die CSS-Eigenschaft „animation-timing-function“.
- 藏色散人Original
- 2019-05-29 09:33:072974Durchsuche
Das CSS-Attribut „animation-timing-function“ ist ein Animationsattribut von CSS, mit dem die Geschwindigkeitskurve der Animation angegeben wird, dh die Art und Weise, wie die Animation abgespielt wird, um die Änderungen der Animation flüssiger zu gestalten.
Wie verwende ich die CSS-Eigenschaft „animation-timing-function“?
Funktion: Animation-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: Die Animation-Timing-Funktion 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.
● Standardeinstellung erleichtern. Die Animation beginnt langsam, beschleunigt dann, verlangsamt sich dann und endet schließlich.
● Ease-In Die Animation startet mit niedriger Geschwindigkeit.
● Ease-Out Die Animation endet mit niedriger Geschwindigkeit.
● Die Easy-In-Out-Animation beginnt und endet mit niedriger Geschwindigkeit.
● Kubik-Bezier(n,n,n,n) seinen eigenen 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.
Beispiel für die Verwendung des CSS-Attributs „animation-timing-function“
<!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>Effektausgabe:
Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS-Eigenschaft „animation-timing-function“.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!