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

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

我认为现在它正在使用easy-in-out或类似的东西来实现"计时功能"。

尝试添加此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);
    }
}

第一版：事实上，在我的测试页面上欣赏了你的"与此同时，在蝙蝠洞…！"动画一段时间后，我认为还有更多需要改进的地方。我猜平移是为了抵消由默认的"中心点"位置引起的偏心旋转。因此，您可以添加这个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转换：无"

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