Question

我有两个div，其中有一个圆圈和一个微笑，其中 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暂停动画。

使用动画播放状态属性的一个非常简单的解决方案。试试这些：

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

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

1 个答案: