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;

2ND编辑：所以现在我看到你的班级声明，似乎宽松是故意的。由于这适用于动画的每个阶段，因此需要稍微应用一些。这是我的全部更改 - 你也可以删除课堂内的计时功能：

@-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);
    }
}

第1次编辑：实际上，在我的测试页面中欣赏了你的“同时，在batcave ......！”动画片刻，我认为还有一些需要改进的地方。我猜测翻译的目的是抵消由默认“中心点”位置引起的偏心旋转。因此，您可以添加此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属性

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

1 个答案: