implémentation CSS3 de l'effet d'animation-tutoriel CSS-php.cn

implémentation CSS3 de l'effet d'animation

青灯夜游

Libérer： 2018-09-12 18:05:07

original

2379 Les gens l'ont consulté

Ce chapitre vous présentera l'implémentation de l'effet d'animation CSS3, afin que vous puissiez comprendre comment une simple animation CSS3 est implémentée. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

css3-animation :

a les attributs suivants :

1. 2. animation-duration spécifie le nombre de secondes ou de millisecondes nécessaires pour terminer l'animation. La valeur par défaut est 0
3 animation-timing-function la courbe temporelle de l'animation, linéaire à vitesse constante, facilité au début. lentement puis vite, puis ralentissez avant la fin.
4. animation-delay est l'intervalle de retard avant de démarrer l'animation, la valeur par défaut est 0
5. animation-iteration-count est le nombre de fois que l'animation est jouée, la valeur par défaut est 1
6. animation-direction indique s'il faut jouer à l'envers à tour de rôle Animation
7 animation-play-state Si l'animation est en cours d'exécution ou en pause. Valeur : paused spécifie une animation en pause en cours d'exécution ; par défaut.

Exemple de code (en prenant la traduction --translate comme exemple pour illustrer l'ensemble du processus d'animation) :

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

Copier après la connexion

Rendu :

implémentation CSS3 de leffet danimation