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

我正在使用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动画行中出现一个感叹号，这是它的屏幕截图



可能是什么问题？

最佳答案

对不起，我没有在这里询问之前检查动画属性语法而感到抱歉。我以为我做对了..！它应该是

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

关于css - CSS动画在Safari中不起作用，但在Chrome和Firefox中很好，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33107073/