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

How to stop css3 animation

醉折花枝作酒筹

Release： 2023-01-05 16:08:05

Original

5394 people have browsed it

In CSS, you can use the animation-play-state attribute to control the pause of animation, with the syntax "animation-play-state:paused"; the compatibility of this attribute in different browsers is different, and the corresponding prefix needs to be added (such as "-ms-", "-webkit-", etc.).

How to stop css3 animation

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

Animation is the effect of gradually changing an element from one style to another. You can change as many styles as you want as many times as you like. Please specify the time when the change occurs as a percentage, or use the keywords "from" and "to", which are equivalent to 0% and 100%.

CSS3 animation directly provides an animation-play-state style to control the pause processing of animation. Add a control pause style. When writing the animation style, pay special attention to the compatibility of different browsers and add the corresponding prefix.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>document</title> 
<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> animation-play-state属性不兼容 Internet Explorer 9以及更早版本的浏览器.</p>
<div></div>
</body>
</html>

Copy after login

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

Note: Use this property in JavaScript to pause the animation during a cycle.

animation-play-state: paused|running;

Copy after login

paused: Specify the pause animation
running: Specify the running animation

Recommended Learn: css video tutorial

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