css @keyframesanimation不适用于Windows的Safari

我做了一个旋转木马脚本,可以淡入淡出,滑动或做一个过渡。 这可以通过更改父容器的类名(#moduleCarousel_12)来设置。

[小提琴: http : //jsfiddle.net/6jx8ufwg/11/ ]

在Chrome中,这工作正常。

然而,在Safari(for Win)中:

  1. 如果父类在类名称中也有“向左滑动”,则淡入淡出function才起作用。 这很奇怪,因为它只添加了第二个animation(左定位)。
    .moduleCarousel.fade > div.active { z-index: 3; opacity: 1; -webkit-animation-name: fade; animation-name: fade; } .moduleCarousel.slide.left.fade > div.active { -webkit-animation-name: slide-left, fade; animation-name: slide-left, fade; } /* Chrome, Safari, Opera */ @-webkit-keyframes fade { 0% {opacity: 0; -moz-opacity: 0;} 100% {opacity: 1; -moz-opacity: 1;} } /* Standard syntax */ @keyframes fade { 0% {opacity: 0; -moz-opacity: 0;} 100% {opacity: 1; -moz-opacity: 1;} } @-webkit-keyframes slide-left { 0% {left: 100%;} 100% {left: 0%;} } @keyframes slide-left { 0% {left: 100%;} 100% {left: 0%;} } 

    2.幻灯片切换根本不起作用

我究竟做错了什么? 🙂

Windows上的Safari浏览器不是一个“真正的”浏览器,它是模拟的,在其上工作。 有很多关于它的错误,许多网页设计师都有问题,而且苹果公司也在2012年撤回了对windows的safari的支持。好的部分是,获得彩票的机会比找窗户的机会高-safari用户。

所以这是Safari(对于Windows)中的一个bug,显然没有解决方法。

编辑:根据CSS-tricks.com和w3schools.com我定义动画的方式是正确的。 (除非我失去了一些东西?)它适用于所有的浏览器,除了Safari的Windows。

而且由于没有人知道为什么它不起作用,就像Easwee和Gho所说的那样,苹果公司不再支持这个版本的浏览器,合乎逻辑的结论是:这是一个错误,现在还没有修复。 (也许永远不会有)

但如果我错了,或者如果我在剧本中犯了错误,请告诉我。