css - 为什么 -webkit-keyframes 在我的 SASS mixin 中不起作用？

Question

我有这个 SASS mixin 可以使按钮闪烁:

@mixin background_animation($color) {
  -webkit-animation: backgroundAnimation 800ms infinite;
  @-webkit-keyframes backgroundAnimation {
    0%      {background-color: $color;}
    50%     {background-color: red;}
    100%    {background-color: $color;}
  }
}

我是这样使用它的:

@include background_animation(#000000);

但是，它不起作用。按钮的背景颜色不会闪烁。

谁能告诉我这里缺少什么？

附言当不将其作为混入时，该代码可以正常工作。

生成的 CSS 如下所示:

-webkit-animation-delay: 0s;
-webkit-animation-direction: normal;
-webkit-animation-duration: 0.800000011920929s;
-webkit-animation-fill-mode: none;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: backgroundAnimation;
-webkit-animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

... other rules omitted for brevity

Answer 1

SASS 在编译后没有产生预期的结果。这就是您得到的错误信息:

.box {
  -webkit-animation: backgroundAnimation 800ms infinite;
}
@-webkit-keyframes backgroundAnimation {
  .box 0%  {
    background-color: black;
  }
  .box 50%  {
    background-color: red;
  }
  .box 100%  {
    background-color: black;
  }
}

用法:

.box {
    @include background_animation(#000000);
}

基本上您不需要关键帧的 .box 选择器。

这里是 working DEMO ( Chrome )

更新

你在这里采取了稍微错误的方法。试试这个代码片段:

@mixin keyframes($animation-name) {
  @-webkit-keyframes $animation-name {
    @content;
  }
  /*
  Other browser prefixes here
  @-moz-keyframes $animation-name {
    @content;
  }*/
}

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

@include keyframes(background_animation) {
  0%      {background-color: red;}
  50%     {background-color: green;}
  100%    {background-color: blue;}
}

div {
  @include animation('background_animation 800ms infinite');
}

它应该编译成这样:

@-webkit-keyframes background_animation {
  0% {
    background-color: red;
  }

  50% {
    background-color: green;
  }

  100% {
    background-color: blue;
  }
}
/*
Other browser prefixes here
@-moz-keyframes $animation-name {
  @content;
}*/
div {
  -webkit-animation: background_animation 800ms infinite;
}

产生 this result in chrome .