Explication détaillée des propriétés d'animation CSS3 (avec code)-tutoriel CSS-php.cn

Explication détaillée des propriétés d'animation CSS3 (avec code)

不言

Libérer： 2018-08-10 10:11:31

original

2275 Les gens l'ont consulté

Ce que cet article vous apporte, c'est une explication détaillée des propriétés d'animation de CSS3 (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

l'animation css3 (animation) a les attributs suivants :

1. nom d'animation nom d'animation personnalisé
2. durée d'animation 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, est à vitesse constante, la facilité est lente au début puis rapide, puis ralentit avant la fin.
4. animation-delay L'intervalle de retard avant le démarrage de l'animation, la valeur par défaut est 0
5. animation-iteration-count Le nombre de fois que l'animation est jouée, la valeur par défaut est 1
6. animation- direction 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 l'animation en pause en cours d'exécution ; spécifie l'animation en cours d'exécution, par défaut.

Exemple : Cette démo utilise la traduction comme exemple pour illustrer l'ensemble du processus d'animation

html :

<body>
		<div class="warp">
			
		</div>
</body>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Recommandations associées :

Comment faire clignoter l'affichage du texte uniquement en utilisant du code CSS ? (Exemple de code)

Comment utiliser CSS et D3 pour obtenir une animation à effet de swing cycloïde

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!