CSS3-Implementierung des Animationseffekts-CSS-Tutorial-php.cn

CSS3-Implementierung des Animationseffekts

青灯夜游

Freigeben： 2018-09-12 18:05:07

Original

2341 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!