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'); 
}