Wozu dient das Attribut „animation-timing-function'?-CSS-Tutorial-php.cn

Wozu dient das Attribut „animation-timing-function'?

青灯夜游

Freigeben： 2019-01-31 11:01:33

Original

3881 Leute haben es durchsucht

Das Attribut „animation-timing-function“ wird verwendet, um die Geschwindigkeitskurve der Animation festzulegen. Es kann die Animationsgeschwindigkeit auf eine konstante Geschwindigkeit einstellen, bei einer niedrigen Geschwindigkeit beginnen, bei einer niedrigen Geschwindigkeit enden, bei einer niedrigen Geschwindigkeit beginnen und enden Geschwindigkeit, zuerst langsam und dann schnell und dann langsamer, oder von selbst. Benutzerdefinierter Wert.

Wozu dient das Attribut „animation-timing-function'?

CSS3-Animations-Timing-Funktionseigenschaft

Funktion:

animation-timing-function 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;

Nach dem Login kopieren

Anweisungen:

animation-timing-function verwendet den Namen „Cubic Bezier )-Funktion zum Generieren der Geschwindigkeitskurve. 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: Standardwert. 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.

ease-in-out: Die Animation beginnt und endet mit langsamer 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.

Verwendungsbeispiel des CSS3-Animations-Timing-Funktionsattributs

<!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>

<div></div>

</body>
</html>

Nach dem Login kopieren

Rendering:

Wozu dient das Attribut „animation-timing-function?

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere spannende Inhalte finden Sie in den entsprechenden Tutorial-Kolumnen auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonWozu dient das Attribut „animation-timing-function'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!