CSS动画在Safari中不起作用，但在Chrome和Firefox中很好

Question

我正在使用SASS，这是我使用

的代码

@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中运行良好，但它在Safari中无法执行。 我已尝试在关键帧内部使用百分比值，如

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

但这并没有解决它。

在Safari的控制台中，CSS动画行中会出现一个感叹号，这里是它的截图

问题是什么？

Answer 1

很抱歉，在此处询问之前我没有检查动画属性语法。我以为我做对了..！它应该是

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