如何停止css3动画

问题描述

问 题

ball2{

        position: absolute;
        height: 60px;
        width: 60px;
        left: 60%;
        top: 50%;
        transform: translate(-50%,-50%) rotate(0);
        background-color: #ddd;
        border-radius: 50%;
        transform-origin: -116.7% 50%;
        -webkit-animation: rotate 3s linear infinite;
        text-align: center;
    }

    #ball2:hover {
        ???
    }

    @-webkit-keyframes  rotate {    
        to {
            -webkit-transform:translate(-50%,-50%) rotate(1turn);
        }         
    }

一个球体真在绕定点旋转，在hover写什么，才能达到鼠标移入#ball2停止旋转的效果？求大神解答。

解决方案

animation-play-state: paused

这篇关于如何停止css3动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！