Heim > Artikel > Web-Frontend > So legen Sie die Rotationsgeschwindigkeit der Animation in CSS3 fest
So legen Sie die Rotationsgeschwindigkeit der Animation in CSS3 fest
- WBOYOriginal
- 2022-04-28 16:32:122654Durchsuche
In CSS3 können Sie das Attribut „animation-timing-function“ verwenden, um die Rotationsgeschwindigkeit der Animation festzulegen. Dieses Attribut wird verwendet, um anzugeben, wie die Animation einen Zyklus abschließt, und die Geschwindigkeitskurve der Animation festzulegen. element {animation-timing-function: Geschwindigkeitsattributwert;}".
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So legen Sie die Rotationsgeschwindigkeit der Animation in CSS3 fest.
animation-timing-function gibt an, wie die Animation einen Zyklus abschließt.
Die Geschwindigkeitskurve definiert, wie lange es dauert, bis die Animation von einem Satz CSS-Stile zu einem anderen wechselt.
Die Geschwindigkeitskurve wird verwendet, um Änderungen reibungsloser zu gestalten.
Standardwert: EASY
Die Syntax ist:
animation-timing-function: value;
Die mathematische Funktion, die von der Animation-Timing-Funktion verwendet wird, heißt kubische Bezier-Kurve, Geschwindigkeitskurve. Mit dieser Funktion können Sie Ihre eigenen Werte oder einen der vordefinierten Werte verwenden:
Eigenschaftswerte sind wie folgt:
linear Die Geschwindigkeit der Animation ist von Anfang bis Ende gleich. Testen Sie
ease default. Die Animation beginnt langsam, beschleunigt dann, verlangsamt sich dann und endet schließlich. Test
Einfach-Animation startet bei niedriger Geschwindigkeit. Testen Sie die
Ease-out-Animation, die bei niedriger Geschwindigkeit endet. Test
Ease-in-out-Animation beginnt und endet mit langsamer Geschwindigkeit. Test
steps(int,start|end) gibt die Anzahl der Intervalle (Schritte) in der Zeitfunktion an. Es gibt zwei Parameter. Der erste Parameter gibt die Anzahl der Intervalle der Funktion an, die eine positive ganze Zahl (größer als 0) ist. Der zweite Parameter ist optional und gibt an, ob die Animation vom Anfang oder Ende des Zeitraums kontinuierlich ist. Die Bedeutungen sind wie folgt: Start: bedeutet, direkt zu starten. end: Standardwert, der ein abruptes Ende anzeigt.
cubic-bezier(n,n,n,n) sein eigener Wert in der Kubik-Bezier-Funktion. Mögliche Werte sind numerische Werte von 0 bis 1.
Das Beispiel sieht wie folgt aus:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div1{
width:100px;
height:100px;
background-color:pink;
animation:fadenum 5s;
animation-timing-function:ease-in-out;
}
@keyframes fadenum{
100%{transform:rotate(360deg);}
}
.div2{
width:100px;
height:100px;
background-color:pink;
animation:fadenums 5s;
animation-timing-function:linear;
}
@keyframes fadenums{
100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div class="div1"></div><br><br>
<div class="div2"></div>
</body>
</html>Ausgabeergebnis:
(Teilen von Lernvideos: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo legen Sie die Rotationsgeschwindigkeit der Animation in CSS3 fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!