In diesem Kapitel werden Sie in die Implementierung des CSS3-Animationseffekts eingeführt, damit Sie verstehen, wie eine einfache CSS3-Animation implementiert wird. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
css3-animation:
hat die folgenden Attribute:
1. Benutzerdefinierter Animationsname
2. Animationsdauer gibt an, wie viele Sekunden oder Millisekunden es dauert, bis die Animation abgeschlossen ist.
3 Die Zeitkurve der Animation ist zunächst linear langsam und dann schnell, und dann vor dem Ende langsamer.
4. Animationsverzögerung ist das Verzögerungsintervall vor dem Start der Animation, der Standardwert ist 0
5. Animationsiterationsanzahl ist die Anzahl der Wiedergaben der Animation, der Standardwert ist 1
6. Animationsrichtung gibt an, ob die Animation der Reihe nach rückwärts abgespielt werden soll
7. Animationswiedergabestatus Gibt an, ob die Animation ausgeführt wird oder angehalten ist. Wert: „paused“ gibt eine angehaltene Animation an; „running“ gibt eine laufende Animation an, Standardeinstellung.
Codebeispiel (nehmen Sie translation --translate als Beispiel, um den gesamten Animationsprozess zu veranschaulichen):
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .warp { height: 100px; width: 100px; border: 1px solid #eee; background-color: #21B4BB; 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% { background-color: #21B4BB; /*时间点可以任意,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% { background-color: #008000; /*时间点可以任意*/ 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% { background-color: #444444; /*时间点可以任意*/ 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% { background-color: #70DBDB; /*时间点可以任意*/ 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 */ } } </style> </head> <body> <div class="warp"> </div> </body> </html>
Rendering:
Das obige ist der detaillierte Inhalt vonCSS3-Implementierung des Animationseffekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!