悬停停止动画在各自的位置

Question

我有两个div,其中有一个圆圈和一个smily,其中innercircle1 div正在旋转给定的动画.我想要的是当我将鼠标悬停在innercircle1 div上时,它应该停止但是使用它们当前的变换原点位置,目前当我将鼠标悬停在innercircle1 div上时,它会转到它们的起点,即它们给定的变换原点和停止点.

   body {
        background: #000;
        color: #fff;
    }

    @keyframes circle {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    @keyframes inner-circle {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(-360deg);
        }
    }

    .outercircle {
        border: 1px solid red;
        border-radius: 50%;
        width: 310px;
        margin: 64px auto;
        height: 310px;
        position: Relative;
    }

    .innercircle {
        width: 100px;
        height: 100px;
        margin: 20px auto 0;
        color: orange;
        font-size: 100px;
        line-height: 1;
        animation: circle 5s linear infinite;
        transform-origin: 50% 200px;
        position: ABSOLUTE;
        top: -70px;
        left: 109px;
    }

    .innercircle1 {
        animation: inner-circle 5s linear infinite;
    }

 <div class="outercircle"><div class="innercircle"><div class="innercircle1">?</div></div></div>

Answer 1

您可以使用 JQUERY 和 CSS 来暂停动画。

使用animation-play-state属性的一个非常简单的解决方案。尝试这些行：

    .innercircle1 {
        animation: inner-circle 5s linear infinite;
        animation-play-state: play;
    }
   .innercircle1:hover{
        animation-play-state: paused;
    }