【问题标题】：CSS Animation works in Chrome but not SafariCSS Animation 适用于 Chrome 但不适用于 Safari
【发布时间】：2014-04-17 12:32:45
【问题描述】：

我不知道这里发生了什么。

我正在更新一个仍在使用选取框标记的网站，所以我用更平滑（尽管仍然是选取框）的 css 动画替换：

问题是它在 chrome 和 firefox 中运行良好，但在 safari 中不一致。有时它会加载，有时它不会。通过网站上的链接与硬重新加载相比，似乎也不会更频繁地加载。

是否有任何加载可能会干扰动画？任何想法为什么它不能在某些负载上工作？

它发生的页面是http://www.peacenow.com，我使用的 CSS 是：

 .marquee span {
  position: absolute;
  left: 0;
  top: 0;
  width: 7500px;
  -webkit-animation: moveSlideshow 165s linear infinite;
}

@-webkit-keyframes moveSlideshow {
  0%   { 
    -webkit-transform: translate(0, 0);  
  }    
  100% { 
    -webkit-transform: translate(-100%, 0);  
  }
}

【问题讨论】：

标签： css animation marquee

【解决方案1】：

Try looking at Safari's methods for animation. 或者，我会尝试使用更跨浏览器兼容的方法，例如 jQuery。

如果您考虑到当今的浏览器用户群以及它们之间的兼容性，jQuery 是您的最佳选择。 Look into jQuery .animate() 了解更多信息。

<script>
    $('.marquee').marquee(); // The code to start a simple marquee in JavaScript's jQuery Marquee Plugin
</script>

您需要通过从jQuery 和jQuery Marquee 下载加载的jQuery 和Marquee 插件，然后将它们与<script src="/path/to/script.js"></script> 链接

JSFiddle Example

附：这确实适用于我 4 年前的 Androids 2.3 浏览器，因为基本动画不来自您的网站。让我们面对现实吧，实际上已经没有多少网络冲浪者坐在电脑前了。

【讨论】：

请提供一个示例，说明如何使用您提出的一种（或最好同时使用两种）方法。
Here is a plugin exactly for marquees from jQuery 我想我会写一个例子。
不确定我是否同意“jQuery 是您的最佳选择”。 - jQuery 的动画没有利用 CSS 过渡/动画（所以，你失去了硬件加速的好处......）
@JackPattishallJr.加速受限。哈哈，它会在大多数移动浏览器和旧浏览器上失败。当动画失败时，这个选框插件似乎使用 CSS 作为后备。
@jsve 添加了一个示例。

【解决方案2】：

我认为有两种方法可以解决 Safari 的这个问题。

第一个是使用 JavaScript 启动动画。

使用 Charles 代理，我操纵了响应，以便：

<p class="marquee" id="countries">

变成了这样：

<p class="marquee-pre" id="countries">

然后，我在页面底部注入如下JS：

<script>
    $('.marquee-pre').attr('class', 'marquee');
</script>

立即解决了这个问题。

如果你不介意在页面中添加 JS，我会推荐这种方法。

如果您不能添加 JS，或者不想添加，我发现对 CSS 动画进行以下更改也有效：

 .marquee span {
      -webkit-animation: moveSlideshow 165s  linear infinite;
 }

到：

 .marquee span {
      -webkit-animation: moveSlideshow 165s steps(10000) infinite;
 }

虽然这可行，但我发现它不像使用线性时序那样“流畅”...

【讨论】：