51dev.com IT技术开发者社区

51dev.com 技术开发者社区

css3暂停动画

IT猿阅读(27)2019-10-30 收藏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>

 

以上就是css3暂停动画的全部内容。