Heim > Artikel > Web-Frontend > Ist CSS3-Animation eine Software?

Ist CSS3-Animation eine Software?

WBOYOriginal: 2022-06-23 16:02:031675Durchsuche

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.

css3-Animation ist keine Software

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

Die Animation dauert 4 Sekunden, während sich die Hintergrundfarbe des

-Elements schrittweise von „rot“ zu „gelb“ ändert:

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

Ist CSS3-Animation eine Software?

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

JavaScript html5 css css3 html 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：Ist Link eine neue Stilregel in CSS3?Nächster Artikel：Ist Link eine neue Stilregel in CSS3?

In Verbindung stehende Artikel

Mehr sehen