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

时间:2014-03-03 14:41:07

标签: css css3 google-chrome animation stylesheet

在最新版本的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'。希望这会有所帮助。

1 个答案:

答案 0 :(得分: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的原因。这就是这样!我想这不是默认值,因为它可能需要更多的内存消耗,但我没有看到任何证据证明它(不是我已经找到它)。

  3. As Aside

    无论如何,没有人会看到你的动画,因为它在首映。我建议您检测用户滚动的距离,并在用户到达推荐书后添加该动画属性。这样,当用户可以看到它时,它只会“fadeInLeft”!

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