Detaillierte Erläuterung der CSS3-Animationseigenschaften (mit Code)-CSS-Tutorial-php.cn

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

不言

Freigeben： 2018-08-10 10:11:31

Original

2275 Leute haben es durchsucht

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>

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

@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 */
	}
}

Nach dem Login kopieren

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!