suchen

Heim >Web-Frontend >CSS-Tutorial >CSS3-Implementierung des Animationseffekts

CSS3-Implementierung des Animationseffekts

青灯夜游
青灯夜游Original
2018-09-12 18:05:072356Durchsuche

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:

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!

css3 count function animation
Stellungnahme：
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
Vorheriger Artikel：Was sind Webstandards? ?Nächster Artikel：Was sind Webstandards? ?

In Verbindung stehende Artikel

Mehr sehen