Question

我制作了一个旋转木马脚本，可以淡出，滑动或同时作为过渡。这可以通过更改父容器的类名来设置（＃moduleCarousel_12）。

在Chrome中，这很好用。

在Safari（for Win）中：

如果父级在类名中也有“向左滑动”，则淡入淡出只能起作用。这很奇怪，因为它只添加了第二个动画（左定位）。

.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不是真实的＆＃34;浏览器，它被模仿，有点工作。有很多关于它的错误，很多网页设计师都有这个问题，而且苹果公司也在2012年撤回了他们对Windows游戏的支持。很重要的是，赢得彩票的机会高于找到一个windows-safari-user。

Answer 2

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

修改根据{{3}}和CSS-tricks.com，我定义动画的方式是正确的。（除非我遗漏了什么？）它适用于所有浏览器，但Safari for Windows除外。

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

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

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

2 个答案: