爲什麼-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。