Ist CSS3-Animation eine Software?-Front-End-Fragen und Antworten-php.cn

Ist CSS3-Animation eine Software?

WBOY

Freigeben： 2022-06-23 16:02:03

Original

1709 Leute haben es durchsucht

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.

Ist CSS3-Animation eine Software?

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>

Nach dem Login kopieren

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!