How to set animation to play after a few seconds in css3-Front-end Q&A-php.cn

How to set animation to play after a few seconds in css3

青灯夜游

Release： 2022-03-18 16:33:46

Original

3236 people have browsed it

In CSS3, you can use the animation-delay attribute to set the animation to play after a few seconds. This attribute can set the delay time of the object animation, that is, the waiting time before the animation starts, in seconds or milliseconds; the syntax "animation -delay: value unit;", the unit can be seconds (s) or milliseconds (ms).

How to set animation to play after a few seconds in css3

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In CSS3, you can use the animation-delay attribute to set the animation to play after a few seconds.

The animation-delay property can arbitrarily retrieve or set the delay time of the object animation, that is, define when the animation starts.

Syntax:

animation-delay: time;

Copy after login

time: Define the time to wait before starting the animation, in seconds or milliseconds (the value unit can be seconds s or milliseconds ms) ;The default value is 0.

Tips: Negative values are allowed, -2s causes the animation to start immediately, but skips 2 seconds to enter the animation.

Example: Delay 5 seconds to start 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>

Copy after login

How to set animation to play after a few seconds in css3

(Learning video sharing: css video tutorial, web front end)

The above is the detailed content of How to set animation to play after a few seconds in css3. For more information, please follow other related articles on the PHP Chinese website!