小编Phi*_*lip的帖子

我做了一个旋转木马脚本,可以淡出,滑动或同时作为过渡.这可以通过更改父容器的类名来设置(#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%;} …

   Run Code Online (Sandbox Code Playgroud)