Heim >Web-Frontend >Front-End-Fragen und Antworten >Ist CSS3-Animation eine Software?
css3-Animation ist keine Software. Bei der CSS-Animation geht es darum, Elemente schrittweise von einem Stil zum anderen zu ändern. Das Wesen der CSS-Animation besteht darin, dass sich die Animationseigenschaften schrittweise von einem Wert zum anderen ändern können Sie können das Animationsattribut mit dem Animationsattribut verwenden, um CSS-Animationseffekte zu erzielen.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
CSS kann HTML-Elemente animieren, ohne JavaScript oder Flash zu verwenden! .
Was ist CSS-Animation?
Animation bewirkt, dass ein Element allmählich von einem Stil zum anderen wechselt.
Sie können beliebig viele CSS-Eigenschaften ändern.
Um CSS-Animationen zu verwenden, müssen Sie der Animation zunächst einige Keyframes zuweisen.
Keyframes enthalten den Stil, den ein Element zu einem bestimmten Zeitpunkt hat.
Einige CSS-Eigenschaften sind animierbar, was bedeutet, dass sie für Animationen und Übergänge verwendet werden können.
Animierte Eigenschaften können sich schrittweise von einem Wert zum anderen ändern, z. B. Größe, Menge, Prozentsatz und Farbe.
@keyframes-Regeln
Wenn Sie in der @keyframes-Regel einen CSS-Stil angeben, wechselt die Animation zu einem bestimmten Zeitpunkt schrittweise vom aktuellen Stil zum neuen Stil.
Damit die Animation funktioniert, muss die Animation an ein Element gebunden sein.
Das folgende Beispiel bindet die „example“-Animation an das
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: red; animation-name: example; animation-duration: 4s; } @keyframes example { from {background-color: red;} to {background-color: yellow;} } </style> </head> <body> <p><b>注释:</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p> <div></div> <p><b>注释:</b>当动画结束后,会变回最初的样式。</p> </body> </html>
Ausgabeergebnis:
(Lernvideo-Sharing: css Video-Tutorial , HTML-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonIst CSS3-Animation eine Software?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!