css @keyframes动画在Safari for Windows中无效

Question

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

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

在Chrome中,这很好用.

然而,在Safari(for Win)中:

1. 如果父级在类名中也有"向左滑动",则淡入淡出仅起作用.这很奇怪,因为它只添加了第二个动画(左定位).

   .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用户.