为什么-webkit-keyframes无法在我的SASS mixin中工作？

Question

我有这个SASS混入，应该让一个按钮闪烁：

@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); 

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

有人可以告诉我我在这里失踪了吗？

P.S.代码工作正常时，不包括它作为一个混合。

生成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）

UPDATE

您在这里采取略有错误的做法。试试这个代码片段，而不是：

@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。