How to set and execute css3 animation once-CSS Tutorial-php.cn

How to set and execute css3 animation once

青灯夜游

Release： 2022-01-13 12:50:35

Original

9985 people have browsed it

In CSS3, you can use the animation-iteration-count attribute to set the animation to be executed once. The function of this attribute is to define the number of times the animation is played; when the value of the animation-iteration-count attribute is set to the number "1" , you can set the animation to play only once.

How to set and execute css3 animation once

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

In CSS3, you can use the animation-iteration-count attribute to set the animation to execute once.

The animation-iteration-count attribute can define the number of times the animation is played and set how many times the animation should be played.

Syntax:

animation-iteration-count: value;

Copy after login

Value	Description
n	A number that defines how many times the animation should be played
infinite	Specifies that the animation should be played an infinite number of times (forever)

Example:

Set the animation to play only once

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

				/* Safari and Chrome */
				-webkit-animation: mymove 3s;
				-webkit-animation-iteration-count: 1;
			}

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

				to {
					top: 200px;
				}
			}

			@-webkit-keyframes mymove

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

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

	</body>
</html>

Copy after login

How to set and execute css3 animation once

Modify it and set the animation to play 3 times

div {
	width: 100px;
	height: 100px;
	background: red;
	position: relative;
	animation: mymove 3s;
	animation-iteration-count: 3;

	/* Safari and Chrome */
	-webkit-animation: mymove 3s;
	-webkit-animation-iteration-count: 3;
}

Copy after login

How to set and execute css3 animation once

（Learning video sharing: css video tutorial）

The above is the detailed content of How to set and execute css3 animation once. For more information, please follow other related articles on the PHP Chinese website!