Home > Web Front-end > Front-end Q&A > How to use css animation-play-state property

How to use css animation-play-state property

藏色散人
Release: 2019-05-29 09:26:46
Original
3015 people have browsed it

css animation-play-state property specifies whether the animation is running or paused. animation-play-state: paused; means the animation has been paused, animation-play-state: running; means the animation is playing.

How to use css animation-play-state property

#How to use the css animation-play-state property?

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

Syntax:

animation-play-state: paused|running;
Copy after login

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

Note: You can use this attribute in JavaScript to pause the animation during playback.

css animation-play-state property usage example

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s;
animation-play-state:paused;
/* Safari and Chrome */
-webkit-animation:mymove 5s;
-webkit-animation-play-state:paused;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注释:</strong>Internet Explorer 9 以及更早的版本不支持 animation-play-state 属性。</p>
<div></div>
</body>
</html>
Copy after login

Effect:

How to use css animation-play-state property

The above is the detailed content of How to use css animation-play-state property. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template