How to stop animation in css3-CSS Tutorial-php.cn

How to stop animation in css3

青灯夜游

Release： 2022-01-20 16:14:02

Original

11451 people have browsed it

In CSS3, the animation-play-state attribute can be used to stop the running animation. The function of this attribute is to specify whether the animation is running or paused. You only need to add "animation-play" to the element to which the animation is applied. -state:paused;" style is enough.

How to stop animation in css3

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

In CSS3, the animation-play-state attribute can be used to stop the running animation animation.

For example: There is such a rotating animation:

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 100px;
				height: 100px;
				background-color: red;
				margin: 50px auto;
				animation: mymove 1s linear infinite;
			}
			@keyframes mymove {
				100% {
					transform: rotate(360deg);
				}

			}

			@-webkit-keyframes mymove {/* Safari and Chrome */
				100% {
					transform: rotate(360deg);
				}

			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

Copy after login

How to stop animation in css3

If you want to make the div element stop rotating, you can set animation-play-state to the div element Attribute comes

div {
	width: 100px;
	height: 100px;
	background-color: red;
	margin: 50px auto;
	animation: mymove 1s linear infinite;
	animation-play-state:paused;
}

Copy after login

How to stop animation in css3

Description:

animation-play-state attribute specifies whether the animation is running or paused.

Syntax:

animation-play-state: paused|running;

Copy after login

paused: Specifies that the animation has been paused.
running: Specifies that the animation is playing.

This attribute can be used with JavaScript to pause the animation during playback.

(Learning video sharing: css video tutorial)

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