关键帧 CSS 动画问题 最新的 Chrome 浏览器

Question

在最新版本的 Chrome 浏览器（版本 33.0.1750.1170）中，我的动画突然停止工作。

网站：http://multipurpose.joostrap.com/

在某些 div 中应该有一个用于推荐的区域。 即

<div class="testimonial-box fadeInLeft animated">

我认为问题可能是 CSS 文件中的 @-webkit-keyframes，但看起来不是这样。

是否有其他人在使用最新的 Chrome 浏览器时遇到此问题或可能已修复？

编辑： 我已更改站点以使用 css 的 un-minifeid css 版本。相关文件是“animations.css”和“combined.css”。希望这会有所帮助。

Answer 1

简单回答

我认为您正在尝试通过一点幻灯片来让内容从 0 不透明度淡入，不是吗？

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

您需要添加的是animation-fill-mode: forwards，以便它贴在动画的最后一帧。

您可以查看示例（仅限 webkit）here on jsFiddle。

说明

当您在 CSS 中运行动画时，浏览器会自动将元素返回到动画之前的状态。这可能会令人沮丧，而且并不总是直观的。

所以你看到的并不是动画没有运行（它是），而是当你向下滚动时它已经完成动画并恢复到原来的状态（不透明度设置为 0） .

所以你有两个选择：

1. 您可以从 CSS 中移除不透明度。问题是它可能在开始动画之前“闪烁”。在您的情况下，这不是问题，因为内容一开始就在首屏之下。但这是不好的做法，因为这可能是未来类似实现的问题。

2. 另一种方法是让元素在其 CSS 动画的最后一帧中出现。这就是我提出animation-fill-mode: forwards 的原因。这正是这样做的！我想这不是默认设置，因为它可能需要更多的内存消耗，但我还没有看到任何证据证明这一点（不是我已经寻找过的）。

旁白

无论如何，没有人会看到您的动画，因为它在首屏下方。我建议您检测用户滚动了多远，并在用户到达推荐信后添加该动画属性。这样，只有在用户可以看到的时候才会“fadeInLeft”！

您可以使用此代码执行此操作：http://jsfiddle.net/R2YD9/2/（需要 jQuery）