我无法弄清楚这里发生了什么。CSS动画可在Chrome浏览器中使用，但不支持Safari浏览器

我正在更新一个网站，在使用中仍然有一个字幕标记，所以我更加顺畅更换（虽然，仍然是一个大帐篷）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); 
    } 
}

来源

2014-04-17 Ryan

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

第一个使用JavaScript来启动您的动画。

使用查尔斯代理，我操纵的反应，从而使这样的：

<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; 
}

虽然这个工程，我发现它不如使用线性时间“光滑”...

来源

2014-04-17 04:32:45 Jack

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和jQuery Marquee下载它们，然后用<script src="/path/to/script.js"></script>

JSFiddle Example

附：将它们链接这对4年前我的Android 2.3浏览器起作用，因为基本动画不是来自您的网站。让我们面对现实，没有多少网民实际上坐在电脑上了。

来源

2014-04-17 02:48:35 WASasquatch

请提供一个如何使用您建议的一个（或优选两个）方法的例子。 –

[这里是一个精确的jquery插件插件]（http://plugins.jquery.com/marquee/）我想我会写一个例子。 – WASasquatch

不确定我同意'jQuery是你最好的选择。' - jQuery的动画没有利用CSS转换/动画（所以，你失去了硬件加速的善良...） – Jack

CSS动画可在Chrome浏览器中使用，但不支持Safari浏览器

回答

JSFiddle Example

相关问题