Heim >Web-Frontend >CSS-Tutorial >Detaillierte Erläuterung der CSS3-Animationseigenschaften (mit Code)
Detaillierte Erläuterung der CSS3-Animationseigenschaften (mit Code)
- 不言Original
- 2018-08-10 10:11:312283Durchsuche
Dieser Artikel bietet Ihnen eine detaillierte Erklärung der Animationseigenschaften von CSS3 (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.
CSS3-Animation (Animation) hat die folgenden Attribute:
1. Animationsname, benutzerdefinierter Animationsname
2. Animationsdauer gibt an, wie viele Sekunden oder Millisekunden es dauert, bis die Animation abgeschlossen ist . Der Standardwert ist 0;
3. Animation-Timing-Funktion Die lineare Zeitkurve der Animation ist eine konstante Geschwindigkeit, die Leichtigkeit ist zuerst langsam und dann schnell und verlangsamt sich dann vor dem Ende.
4. Animation-Delay Das Verzögerungsintervall vor dem Start der Animation, der Standardwert ist 0
5. Animation-Iteration-Count Die Häufigkeit, mit der die Animation abgespielt wird, der Standardwert ist 1
6. Animation- Richtung Ob die Animation der Reihe nach rückwärts abgespielt werden soll
7. animation-play-state Ob die Animation läuft oder pausiert. Wert: „paused“ gibt die angehaltene Animation an; „running“ gibt die laufende Animation an, Standardeinstellung.
Beispiel: Diese Demo verwendet die Übersetzung als Beispiel, um den gesamten Prozess der Animation zu veranschaulichen
html:
<body> <div class="warp"> </div> </body>
css :
.warp{
height: 100px;
width: 100px;
border: 1px solid #eee;
animation-name:moves;
animation-direction:alternate;
animation-delay: 0.2s;
animation-duration: 5s;
animation-play-state: paused;
animation-iteration-count: 3;
/*以上可以简写成：*/
animation: moves 5s linear 0.2s 3;
}
@keyframes moves{ /*动画名称自定义*/
10%{ /*时间点可以任意，10%表示当时间进行到10%是元素要达到的状态*/
transform: translate(100px,0);
-ms-transform:translate(100px,0); /*IE 9*/
-moz-transform:translate(100px,0); /* Firefox */
-webkit-transform:translate(100px,0); /* Safari 和 Chrome */
-o-transform:translate(100px,0); /* Opera */
}
30%{ /*时间点可以任意*/
transform: translate(100px,100px);
-ms-transform:translate(100px,100px); /*IE 9*/
-moz-transform:translate(100px,100px); /* Firefox */
-webkit-transform:translate(100px,100px); /* Safari 和 Chrome */
-o-transform:translate(100px,100px); /* Opera */
}
60%{ /*时间点可以任意*/
transform: translate(0,100px);
-ms-transform:translate(0,100px); /*IE 9*/
-moz-transform:translate(0,100px); /* Firefox */
-webkit-transform:translate(0,100px); /* Safari 和 Chrome */
-o-transform:translate(0,100px); /* Opera */
}
100%{ /*时间点可以任意*/
transform: translate(0,0);
-ms-transform:translate(0,0); /*IE 9*/
-moz-transform:translate(0,0); /* Firefox */
-webkit-transform:translate(0,0); /* Safari 和 Chrome */
-o-transform:translate(0,0); /* Opera */
}
}
Verwandte Empfehlungen:
Wie man reines CSS verwendet Code Textanzeige mit blinkendem Effekt versehen? (Codebeispiel)
So verwenden Sie CSS und D3, um eine Zykloiden-Swing-Effekt-Animation zu erzielen
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der CSS3-Animationseigenschaften (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!