Heim >Web-Frontend >CSS-Tutorial >So sorgen Sie dafür, dass die Geschwindigkeit einer CSS-Animation konstant bleibt
So sorgen Sie dafür, dass die Geschwindigkeit einer CSS-Animation konstant bleibt
- 醉折花枝作酒筹Original
- 2021-07-14 13:34:038252Durchsuche
In CSS können Sie das Attribut „transition-timing-function“ verwenden, um die Animation auf eine konstante Geschwindigkeit einzustellen. Sie müssen dem Element nur den Stil „transition-timing-function: linear;“ hinzufügen.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
ease:
1, Ease: (allmählich verlangsamen) Standardwert
2, linear: (konstante Geschwindigkeit)
3, Ease-in: (beschleunigen)
4, Ease-out: (verlangsamen) ?? 2:
Wenn der Mauszeiger auf dem p-Element platziert wird, ändert sich seine Breite schrittweise von 100 Pixel auf 300 Pixel:
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0; padding: 0;}
.icon_down{ width: 0; height: 0; border-left:20px solid transparent; border-right: 20px solid transparent; border-top:20px solid #B03939; transition: all .1s ease-in 0ms; margin:50px auto; cursor: pointer; }
.icon_down:hover{ transform: rotate(180deg);}
</style></head><body>
<p class="icon_down"></p></body></html>Rendering:
Nachdem die Maus vorbei ist
Empfohlenes Lernen:
Das obige ist der detaillierte Inhalt vonSo sorgen Sie dafür, dass die Geschwindigkeit einer CSS-Animation konstant bleibt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!