Heim > Artikel > Web-Frontend > Wozu dient das Attribut „animation-timing-function“?

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

青灯夜游Original: 2019-01-31 11:01:333801Durchsuche

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.

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;

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>

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!

php css css3 function animation

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wozu dient das Attribut „animation-duration“?Nächster Artikel：Wozu dient das Attribut „animation-duration“?

In Verbindung stehende Artikel

Mehr sehen