Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der CSS3-Animationseigenschaften (mit Code)

Detaillierte Erläuterung der CSS3-Animationseigenschaften (mit Code)

不言Original: 2018-08-10 10:11:312231Durchsuche

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!

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：Wie kann man einen blinkenden Effekt für die Textanzeige nur mithilfe von CSS-Code erzielen? (Codebeispiel)Nächster Artikel：Wie kann man einen blinkenden Effekt für die Textanzeige nur mithilfe von CSS-Code erzielen? (Codebeispiel)

In Verbindung stehende Artikel

Mehr sehen