Heim > Artikel > Web-Frontend > Was sind die vier verwandten Eigenschaften der CSS3-Animation?
Css3 legt vier verwandte Attribute für die Animation fest: 1. Transformationsattribut, das zum Anwenden von 2D- oder 3D-Transformationen auf Elemente verwendet wird; 2. Übergangsattribut, das zum Erzielen von Übergangseffekten verwendet wird; „@keyframes“ definiert das Verhalten eines Animationszyklus.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Im Allgemeinen gibt es nur drei Eigenschaften der CSS3-Animation: Transformation, Übergang und Animation. Das Attribut
transform
transform
属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
transition
属性是一个简写属性,用于设置四个过渡属性:
transition-property
transition-duration
transition-timing-function
transition-delay
<strong>animation</strong>
属性是一个简写属性,用于设置六个动画属性:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation 属性需要和@keyframes规则一起使用,才可创建动画。
<strong>@keyframes</strong>
wendet eine 2D- oder 3D-Transformation auf ein Element an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen.
transition
Die Eigenschaft ist eine Abkürzungseigenschaft zum Festlegen von vier Übergangseigenschaften:
transition-property
li>transition-duration
transition-timing-function
transition-delay
Der
“ ist eine Abkürzungseigenschaft zum Festlegen von sechs Animationseigenschaften:
🎜@keyframes🎜
🎜 Regeln🎜🎜🎜Mit @keyframes-Regeln können Sie Animationen erstellen. 🎜🎜Das Prinzip beim Erstellen von Animationen besteht darin, einen Satz von CSS-Stilen schrittweise in einen anderen Satz von Stilen umzuwandeln. 🎜🎜Sie können diesen Satz CSS-Stile während des Animationsprozesses mehrmals ändern. 🎜🎜Geben Sie den Zeitpunkt an, zu dem die Änderung eintritt, als Prozentsatz oder über die Schlüsselwörter „von“ und „bis“, die 0 % und 100 % entsprechen. 🎜🎜0 % ist die Startzeit der Animation, 100 % ist die Endzeit der Animation. 🎜🎜Für eine optimale Browserunterstützung sollten Sie immer 0 %- und 100 %-Selektoren definieren. 🎜<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> div { width: 100px; height: 100px; background: red; position: relative; animation: mymove 5s infinite; -webkit-animation: mymove 5s infinite; /* Safari and Chrome */ } @keyframes mymove { 0% { top: 0px; left: 0px; background: red; } 25% { top: 0px; left: 100px; background: blue; } 50% { top: 100px; left: 100px; background: yellow; } 75% { top: 100px; left: 0px; background: green; } 100% { top: 0px; left: 0px; background: red; } } @-webkit-keyframes mymove /* Safari and Chrome */ { 0% { top: 0px; left: 0px; background: red; } 25% { top: 0px; left: 100px; background: blue; } 50% { top: 100px; left: 100px; background: yellow; } 75% { top: 100px; left: 0px; background: green; } 100% { top: 0px; left: 0px; background: red; } } </style> </head> <body> <div></div> </body> </html>🎜🎜🎜🎜 (Teilen von Lernvideos: 🎜CSS-Video-Tutorial🎜)🎜
Das obige ist der detaillierte Inhalt vonWas sind die vier verwandten Eigenschaften der CSS3-Animation?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!