css3暂停动画

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>
原文地址:https://www.cnblogs.com/luguankun/p/10945042.html