Question

所以我在之前的模型中为一些类似的模块实现了this动画，并且它工作正常。今天我想在另一个模型上使用相同的动画，我复制了代码，因为它基本相同。我已将所有相关代码放在jsfiddle。

中

正如你在小提琴中看到的那样，这些块都遵循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); } }

让我感到害的是，几周前它似乎并不是出于某种原因需要这些前缀！

滑动关键帧动画不起作用

1 个答案: