在最新版本的Chrome浏览器(版本33.0.1750.1170)中,我的动画突然停止工作。
网站:http://multipurpose.joostrap.com/
有一个Testimonials区域应该在一些div中转换。即
<div class="testimonial-box fadeInLeft animated">
我认为问题可能是CSS文件中的@-webkit-keyframes
,但事实并非如此。
有没有其他人在最新的Chrome浏览器上遇到这种问题,或者可能已经修复了?
编辑:我已经更改了网站,使用非缩小css版本的css。相关文件是"animations.css"one_answers"combined.css"。希望这能有所帮助
简单答案
我想你是想用一点幻灯片让东西从0透明度淡出,不是吗?
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
需要添加的是animation-fill-mode: forwards
,以便它粘贴在动画的最后一帧上。
您可以在jsFiddle上看到一个示例(仅限webkit)。
解释
当您在CSS中运行动画时,浏览器会自动将元素返回到动画之前的状态。这可能令人沮丧,而且并不总是直观的。
因此,您看到的并不是动画没有运行(它确实在运行),而是当您向下滚动时,它已经完成了动画设置,并将其恢复到原始状态(不透明度设置为0)。
所以你有两个选择:
您可以从CSS中删除不透明度。问题是它可能会在开始动画之前"闪烁"。在你的情况下,这不会是一个问题,因为内容一开始就在折叠下面。但这是一种糟糕的做法,因为这可能是未来类似实现的一个问题。
另一种方法是使元素保持在CSS动画的最后一帧中。这就是我提出
animation-fill-mode: forwards
的原因。这正是这样!我想这不是默认的,因为它可能需要更多的内存消耗,但我还没有看到任何证据来证明这一点(并不是说我已经找过了)。
作为旁白
无论如何,没有人会看到你的动画,因为它在折叠下面。我建议您检测用户滚动了多远,并在用户到达Testimonials后添加该动画属性。这样,只有当用户可以看到它时,它才会"fadeInLeft"!
您可以使用以下代码执行此操作:http://jsfiddle.net/R2YD9/2/(需要jQuery)