css @keyframes 动画在 Windows 的 Safari 中不起作用

Question

我制作了一个轮播脚本，可以淡入淡出、滑动或两者兼而有之作为过渡。这可以通过更改父容器的类名（#moduleCarousel_12）来设置。

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

在 Chrome 中这工作正常。

然而，在 Safari（对于 Win）中：

1. 只有在父类的类名中也有“slide left”的情况下，fade 才有效。这很奇怪，因为它只添加了第二个动画（左定位）。

   .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. 幻灯片切换根本不起作用

我做错了什么？ :)

Answer 1

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

Answer 2

所以这是 Safari（适用于 Windows）中的一个错误，显然没有解决方法。

编辑： 根据CSS-tricks.com 和w3schools.com，我定义动画的方式是正确的。 （除非我遗漏了什么？）它适用于所有浏览器，Windows 版 Safari 除外。

由于没有人知道它为什么不起作用，而且正如 Easwee 和 Gho 所说，Apple 不再支持此版本的浏览器，因此合乎逻辑的结论是：这是一个错误，目前存在没有修复。 （而且可能永远不会有。）

但是如果我错了或者我的脚本有错误，请告诉我。