CSS3:animation-play-state,动画暂停

版权声明:任先阳 任 先 阳 任先 先阳,nvcc.cc、www.nvcc.cc、sbfox.com、www.sbfox.com https://blog.csdn.net/qq_39571197/article/details/83714007

如何暂停animation动画,用animation-play-state属性就好了

http://www.w3school.com.cn/cssref/pr_animation-play-state.asp 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>animation-play-state</title>
    <style>
        .play {
            animation-play-state: running !important;
        }

        .pause {
            animation-play-state: paused !important;
        }

        #main {
            margin-left: 20%;
            width: 100px;
            height: 100px;
            background-color: red;
            animation: mainAnim 2s ease 2s infinite alternate;
            animation-fill-mode: backwards;
        }

        @keyframes mainAnim {
            from {
                margin-left: 0;
            }

            to {
                margin-left: 50%;
            }
        }
    </style>
</head>

<body>
    <p>
        <button onclick="main.classList.remove('pause')">开始</button>
        <button onclick="main.classList.add('pause')">暂停</button>
    </p>
    <div id="main"></div>
</body>

</html>

 

阅读更多

没有更多推荐了,返回首页