在最新版本的 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”。希望这会有所帮助。
最佳答案
简单回答
我认为您正在尝试通过一些滑动让内容从 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) .
所以你有两个选择:
您可以从 CSS 中移除不透明度。问题是它可能会在开始动画之前“闪烁”。这对您来说不是问题,因为内容一开始就在首屏之下。但这是不好的做法,因为这可能是 future 类似实现的问题。
另一种方法是保留元素在其 CSS 动画的最后一帧中出现的样子。这就是我提出
animation-fill-mode: forwards
的原因。这正是这样做的!我想这不是默认设置,因为它可能需要更多的内存消耗,但我还没有看到任何证据来证明这一点(不是我一直在寻找它)。
旁白
无论如何,没有人会看到您的动画,因为它处于首屏之下。我建议您检测用户滚动了多远,并在用户到达感言时添加该动画属性。这样,它只会在用户可以看到时“淡入左”!
您可以使用此代码来执行此操作:http://jsfiddle.net/R2YD9/2/ (需要 jQuery)
关于css - 关键帧 CSS 动画问题 最新的 Chrome 浏览器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22149587/