滑入关键帧动画不起作用

Question

所以我实现了this animation to some similar modules in a previous mockup, and it worked fine. Today I wanted to use the same animation on another mockup, and I copied over the code as it was basically the same. I've put all the relevant code in a jsfiddle。

正如您在 fiddle 中看到的那样，所有块都遵循 transformY 并向下移动 150px（如果它们滚动到视图中），但它们不会按照接下来的方式进行动画备份-在动画中：

@keyframes come-in {
to {
transform: translateY(0); } }

虽然我以前使用它时它工作正常，但现在它似乎以同样的方式在我以前的模型中停止工作，尽管我很确定我没有对它做任何事情。适当的类肯定在应用，所以看起来 jQuery 正在工作，这个特定的关键帧动画似乎有问题。

有什么想法吗？我错过了一些非常明显的东西吗？谢谢！

Answer 1

当然这是很明显的事情。结果证明在 Chrome 中不起作用，所以我添加了前缀。

.come-in {
transform: translateY(150px);
  animation: come-in 0.2s ease forwards;
  -webkit-animation: come-in 0.2s ease forwards;}

@-webkit-keyframes come-in {
to {
    transform: translateY(0); } }

让我很生气的是，几周前它似乎还不需要前缀！

滑入关键帧动画不起作用

Slide in keyframes animation not working

css

jquery

animation

css-animations