SCSS不起作用的關鍵幀動畫

Question

我是新來的關鍵幀動畫，經過一番搜索this article看起來是一個很好的開始。

這裏是codepen物品代碼 - http://codepen.io/anon/pen/yYPxJM

@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 animation($str) { 
    -webkit-animation: #{$str}; 
    -moz-animation: #{$str}; 
    -ms-animation: #{$str}; 
    -o-animation: #{$str}; 
    animation: #{$str};  
} 

@include keyframes(slide-down) { 
    0% { opacity: 1; } 
    90% { opacity: 0; } 
} 

.element { 
    width: 100px; 
    height: 100px; 
    background: black; 
    @include animation('slide-down 5s 3'); 
} 

但是，這是行不通的「原樣」，我不知道如何着手。

我將在向下滾動頁面時爲對象設置動畫。例如，將某些動畫設置爲淡入，其他設置爲縮放（呼叫動作）以使其彈出。 jQuery不應該成爲一個問題，這些動畫引發了我的問題。

想了解一下我沒有做對的事情會有些幫助。

在此先感謝！

Answer 1

你必須使用Interpolation: #{}，所以你的$animation-name不被視爲CSS。

下面是關於此事我最喜歡的文章：All You Ever Need to Know About Sass Interpolation

請看看代碼：

@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 animation($str) { 
    -webkit-animation: #{$str}; 
    -moz-animation: #{$str}; 
    -ms-animation: #{$str}; 
    -o-animation: #{$str}; 
    animation: #{$str};  
} 

@include keyframes(slide-down) { 
    0% { opacity: 1; } 
    90% { opacity: 0; } 
} 

.element { 
    width: 100px; 
    height: 100px; 
    background: black; 
    @include animation('slide-down 5s 3'); 
}