css3暂停动画

Posted on 2019-05-29 17:21  猫头唔食鱼  阅读(261)  评论(0)  编辑  收藏  举报

animation-play-state用于设置动画的状态，有两个值，paused和running

 

 <style>
        .box{
            width:100px;
            height: 100px;
            background-color:orange;
            border-radius: 50%;
            text-align: center;
            line-height: 100px;
            color: greenyellow;
            position: absolute;
            top:0;
            left: 0;
            animation: run 2s infinite;
        }

        /* 鼠标经过暂停动画 */
        .box:hover{
            animation-play-state: paused;
        }
        @keyframes run {
            0%{
                left: 0;
            }
            100%{
                left:100px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>