css - 如何避免关键帧动画不同步骤之间的中断？

Question

我希望我的动画不会停在 50%，如何避免这种短暂的中断？

@-webkit-keyframes PLAY {
    0% {
        -webkit-transform: translate(0px,0);
    }
    50% {
        -webkit-transform: translate(-60px,0) rotate(-1080deg) scale(2);
    }
    100% {
        -webkit-transform: translate(-120px,0) rotate(-2060deg) scale(1);
    }
}

.play {
    -webkit-animation-name: PLAY;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: ease-out;
}

Answer 1

我认为现在它正在为它的“计时功能”使用缓入缓出或类似的东西。

尝试添加这个 CSS 属性:

-webkit-animation-timing-function: linear;

第二次编辑:所以现在我看到了你的类声明，似乎缓和是有意的。由于这适用于动画的每个阶段，因此需要稍微不同地应用。这是我的全部更改 - 您也可以删除类内部的计时功能:

@-webkit-keyframes PLAY {
    0% {
        -webkit-transform: translate(0px,0);
        -webkit-animation-timing-function: ease-in;
    }
    50% {
        -webkit-transform: rotate(-1080deg) scale(2);
        -webkit-animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform: rotate(-2060deg) scale(1);
    }
}

第一次编辑:实际上，在我的测试页面上欣赏了您的“与此同时，在 bat 洞......!”动画片刻后，我认为还有更多需要改进的地方。我猜翻译是为了抵消默认“中心点”位置引起的偏心旋转。因此，您可以添加此 CSS 属性，并删除翻译。然后它甚至不依赖于图像大小。

transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;

事实上，0% 可以只是“-webkit-transform: none”

更改为使用正确的跨浏览器 CSS 属性