如何停止css3动画

Question

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停止旋转的效果？求大神解答。

Answer 1

animation-play-state: paused

Answer 2

animation-play-state:paused;

Answer 3

-webkit-animation-play-state:paused;