Heim > Web-Frontend > CSS-Tutorial > Hauptteil

CSS3-Implementierung des Animationseffekts

青灯夜游
Freigeben: 2018-09-12 18:05:07
Original
2332 Leute haben es durchsucht

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>
Nach dem Login kopieren

Rendering:

CSS3-Implementierung des Animationseffekts

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!