Comment définir l'animation pour qu'elle soit lue après quelques secondes en CSS3-Questions et réponses frontales-php.cn

Comment définir l'animation pour qu'elle soit lue après quelques secondes en CSS3

青灯夜游

Libérer： 2022-03-18 16:33:46

original

3235 Les gens l'ont consulté

En CSS3, vous pouvez utiliser l'attribut animation-delay pour définir la lecture de l'animation après quelques secondes. Cet attribut peut définir le temps de retard de l'animation de l'objet, c'est-à-dire le temps d'attente avant le démarrage de l'animation, en secondes ou. millisecondes ; la syntaxe "animation-delay: value +unit;", l'unité peut être des secondes (s) ou des millisecondes (ms).

Comment définir l'animation pour qu'elle soit lue après quelques secondes en CSS3

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

En CSS3, vous pouvez utiliser l'attribut animation-delay pour définir l'animation à lire après quelques secondes. L'attribut

animation-delay peut être utilisé pour récupérer ou définir arbitrairement le temps de retard de l'animation d'un objet, c'est-à-dire pour définir le moment où l'animation démarre.

Syntaxe :

animation-delay: time;

Copier après la connexion

time : Définissez le temps d'attente avant de démarrer l'animation, en secondes ou millisecondes (l'unité de valeur peut être secondes s ou millisecondes ms) ;

Conseils : Les valeurs négatives sont autorisées, -2s fait démarrer l'animation immédiatement, mais saute 2 secondes pour entrer dans l'animation.

Exemple : Délai de 5 secondes pour démarrer l'animation

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 100px;
				height: 100px;
				background: red;
				position: relative;
				animation: mymove 5s infinite;
				animation-delay: 5s;

				/*Safari and Chrome*/
				-webkit-animation: mymove 5s infinite;
				-webkit-animation-delay: 5s;
			}

			@keyframes mymove {
				from {
					left: 0px;
				}

				to {
					left: 200px;
				}
			}

			@-webkit-keyframes mymove

			/*Safari and Chrome*/
				{
				from {
					left: 0px;
				}

				to {
					left: 200px;
				}
			}
		</style>
	</head>
	<body>

		<div></div>

	</body>
</html>

Copier après la connexion

Comment définir lanimation pour quelle soit lue après quelques secondes en CSS3