Question

我使用SASS所以我的CSS语法看起来很奇怪，但无论如何，问题是，我的旋转动画在chrome和firefox上启动得很好，但只能在Safari上部分工作。具体来说，rotateY，scale，skew正常工作，但是旋转和翻译不要。更重要的是，在我转到另一个标签然后返回Safari之后 - 突然它按预期工作了。

这是Safari中的动画（在切换标签之前）：

Safari

而不是：

Chrome

基本上，所有图像都显示在中央，只有缩放和旋转Y动画有效，但翻译和旋转过渡不会。

为了简单起见，这只是我用于Safari的代码的一部分：

@mixin orbit ($name,$time,$modifier,$skewX,$skewY,$perspective,$rotateY,$startScale,$middleScale){
@at-root (without: media) {
    @-webkit-keyframes myOrbit_#{$name} {
        from { -webkit-transform: rotate($modifier+deg) translateX(150%) rotate($modifier+deg) skewX($skewX+deg) skewY($skewY+deg) perspective($perspective+px) rotateY(0deg) scale($startScale,$startScale); }
        50% { -webkit-transform: rotate($modifier+(-180)+deg) translateX(150%) rotate($modifier+180+deg) skewX($skewX+deg) skewY($skewY+deg) perspective($perspective+px) rotateY($rotateY/2+deg) scale($middleScale,$middleScale); }
        to { -webkit-transform: rotate($modifier+(-360)+deg) translateX(150%) rotate($modifier+360+deg) skewX($skewX+deg) skewY($skewY+deg) perspective($perspective+px) rotateY($rotateY+deg) scale($startScale,$startScale); }
    }
-webkit-animation: myOrbit_#{$name} $time+s linear infinite;
}

Answer 1

当我用

定义动画时，我注意到了

-webkit-animation-play-state: paused;

然后是＆＃34;卫星＆＃34;定位得当。因此解决方案是使用时间偏移启动动画。在我的情况下，这有助于：

-webkit-animation-delay: 5ms;

一个棘手的问题是我必须把它放在其他-moz- -o-和＆＃34;常规＆＃34;之后。动画属性，否则不起作用，就像它被覆盖一样。

CSS旋转动画在Safari中无法正常启动

1 个答案: