CSS动画在Safari中无法工作，但在Chrome和Firefox

问题描述：

精细

我使用SASS，这里是我使用CSS动画在Safari中无法工作，但在Chrome和Firefox

@mixin keyframes($animation-name) { 
    @-webkit-keyframes $animation-name { 
    @content; 
    } 
    @-moz-keyframes $animation-name { 
    @content; 
    } 
    @-ms-keyframes $animation-name { 
    @content; 
    } 
    @-o-keyframes $animation-name { 
    @content; 
    } 
    @keyframes $animation-name { 
    @content; 
    } 
} 

@mixin transition() { 
    -webkit-transition: all 300ms ease-in-out; 
    -moz-transition: all 300ms ease-in-out; 
    -ms-transition: all 300ms ease-in-out; 
    -o-transition: all 300ms ease-in-out; 
    transition: all 300ms ease-in-out; 
} 

@mixin animation($str) { 
    -webkit-animation: #{$str}; 
    -moz-animation: #{$str}; 
    -ms-animation: #{$str}; 
    -o-animation: #{$str}; 
    animation: #{$str};  
} 

@include keyframes(fadein) { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

.fadein { 
    @include transition; 
    @include animation('0.5s ease-in-out .7s normal forwards 1 running fadein'); 
}

这在Firefox和Chrome正常工作的代码，但它不执行苹果浏览器。我试图用百分比值的关键帧里面像

0% {opacity: 0;} 
100% {opacity: 1;}

但这并没有任何解决它。

在Safari中的控制台将出现在CSS动画线感叹号，那么这里就是

截图还有什么问题呢？

“transition”和“animation”的代码是什么样的？ – cocoa

对不起，我编辑了这个问题。 – Jeff

我认为问题出在我传递给@include animation（）的参数上。事实上，它应该看起来像这样“淡入淡出1.5s”。我花了一个小时试图弄清楚这一点，显然我在SO发布问题后发现了它。 – Jeff

答

对不起，我没有检查动画属性语法之前问这里之前。我以为我是对的..！它应该是

@include animation('fadein .5s ease-in-out .7s forwards');

CSS动画在Safari中无法工作，但在Chrome和Firefox

相关推荐