css - css关键帧动画旋转完成后返回0度（自行撤消）

Question

这是一个专门的css问题-谢谢。因此，在关键帧动画中，我正在平移和旋转。两者都有效，但旋转旋转 365 度，然后迅速自行撤消。我想我缺少一些基本的东西。感谢您的支持和建议。

    <!-- in html -->
    <div class="batgroup">
        <img id="batgirl" src="imgs/batgirl-ts.png">
    </div>

/** in css file **/ 
    #batgirl {
        position: absolute;
        left: 1080px; 
        top: 320px;
        z-index: 2; 
        animation-direction: forward; 
        animation: peoplemove 4s 0s linear forwards; 
      }

    @keyframes peoplemove{

        50% {
            transform: translate(-150px, -70px) ;   
        }

        75% {
            transform: translate(-250px, 0px) rotate( -360deg) ;
        }
        100% {
            transform: translate(-350px, -70px) ;       
        }
    } /* end keyframe */

标签： csscss-animationstransformationimage-rotation

Answer 1

如果你没有在动画的 100% 位置放置一个 rotate()，它假定你想旋转回零度，这可以简单地通过放置另一个 rotate() 来解决。

@keyframes peoplemove{

    50% {
        transform: translate(-150px, -70px) ;   
    }

    75% {
        transform: translate(-250px, 0px) rotate( -360deg) ;
    }
    100% {
        transform: translate(-350px, -70px) rotate( -360deg) ;       
}