滑入关键帧动画不起作用答案

【问题标题】：Slide in keyframes animation not working滑入关键帧动画不起作用
【发布时间】：2015-01-23 23:12:25
【问题描述】：

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

正如您在小提琴中看到的那样，所有块都遵循 transformY 并向下移动 150 像素（如果它们被滚动到视图中），但它们不会按照进来的动画重新设置动画：

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

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

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

【问题讨论】：

困惑！ jsFiddle 似乎工作得很好——和 CSS Tricks 显示的一样。什么不工作？？
嗯，这绝对不适合我。真的很奇怪！也许只是我的浏览器/计算机的一些东西？我没有任何更新...我会重新启动，看看会发生什么。
所以它仍然不适合我。如果有帮助，我在 Chrome 中。你用的是什么浏览器？
啊，好吧，只需要添加 webkit 前缀。傻我。还是谢谢！

标签： jquery css animation css-animations

【解决方案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); } }

让我感到沮丧的是，就在几周前，由于某种原因，它似乎不需要前缀！

【讨论】：

很高兴你知道了。 :) 你能接受你的回答，这样这个问题就结束了吗？谢谢！
它说我只能明天。那我会的。