0

我希望我的动画不要停在 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;
}
4

1 回答 1

0

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

尝试添加这个 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-transform: none”

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

于 2013-07-03T15:07:57.710 回答