Sass Mixin用于包含多个阶段和变换属性的动画关键帧

Question

这里是我想要制作的标准CSS，但是想用SASS Mixin来完成这项工作。

标准的CSS

@-webkit-keyframes crank-up { 
    100% { -webkit-transform: rotate(360deg);} 
} 
@-moz-keyframes crank-up { 
    100% { -moz-transform: rotate(360deg);} 
} 
@-o-keyframes crank-up { 
    100% { -o-transform: rotate(360deg);} 
} 
keyframes crank-up { 
    100% { transform: rotate(360deg);} 
} 

我使用的是相同的混入，如以下后SASS keyframes not compiling as wanted（如下所示）。

MIXIN

@mixin keyframes($name) { 
    @-webkit-keyframes #{$name} { 
     @content; 
    } 
    @-moz-keyframes #{$name} { 
     @content; 
    } 
    @-ms-keyframes #{$name} { 
     @content; 
    } 
    @keyframes #{$name} { 
     @content; 
    } 
} 

以上是行，只要无关键帧的包括需要一个供应商前缀的属性。与转换属性一样，所有供应商前缀关键帧都会应用（在本例中）-webkit-前缀。 例如：

SCSS

@include keyframes(crank-up) { 
    100% { -webkit-transform: rotate(360deg);} 
} 

CSS

@-webkit-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } } 
@-moz-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } } 
@-ms-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } } 
@keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } } 

通知中的上述，具有-moz-关键帧-webkit-。应该是-moz-

所以，我首先想到的是改变上述混入到：

蚀变MIXIN

@mixin keyframes($first-name, $last-name, $argument) { 
    @-webkit-keyframes #{$first-name} { 
    -webkit-#{$last-name}: #{$argument}; 
    } 
    @-moz-keyframes #{$first-name} { 
    -moz-#{$last-name}: #{$argument}; 
    } 
    @-o-keyframes #{$first-name} { 
    -o-#{$last-name}: #{$argument}; 
    } 
    @keyframes #{$first-name} { 
    #{$last-name}: #{$argument}; 
    } 
} 

随着对混入的调用看起来像

SCSS

@include keyframes(crank-up, transform, rotate(360deg)) { } 

CSS

@-webkit-keyframes crank-up { -webkit-transform: rotate(360deg); } 
@-moz-keyframes crank-up { -moz-transform: rotate(360deg); } 
@-o-keyframes crank-up { -o-transform: rotate(360deg); } 
@keyframes crank-up { transform: rotate(360deg); } 

如果只有一个关键帧“舞台”（参见原始代码 - 页面顶部，只有100％标记），这可以正常工作，如果我的术语在关键帧“舞台” 。

问题

我要像上面的一个混合的东西，如工作。

@-webkit-keyframes crank-up { 
    20%, 
    40% { -webikit-transform: translateY(34px); } 
    80% { opacity: .8; } 
    100% { -webkit-transform: rotate(360deg);} 
} 

我也看过两个Compass Animate插件; compass-animation和较新的​​，但不确定这些是否有用。我需要一些添加变量的方法，并用mixin测试它，但不知道是否可以将变量传递给mixin。

任何帮助非常感谢。谢谢

我一直在玩以下，但都没有工作，只是认为我会加入他们，看看有没有人知道我要去哪里错了。

实验混入：

@mixin vendor-prefix($name, $argument, $webkit: "-webkit-", $moz: "-moz-",$o: "-o-", $stale: ""){ 
    #{$webkit}: #{$name}: #{$argument}; 
    #{$moz}: #{$name}: #{$argument}; 
    #{$o}: #{$name}: #{$argument}; 
    #{$stale}: #{$name}: #{$argument}; 
} 

@mixin vendor-prefix($last-name, $argument){ 
    @if $name == webkit { 
    -webkit-#{$name}: #{$argument}; 
    } @else if $name == moz { 
    -moz-#{$name}: #{$argument}; 
    } @else if $name == o { 
    -o-#{$name}: #{$argument}; 
    } @else { 
    #{$name}: #{$argument}; 
    } 
} 

Answer 1

为了应对供应商prefixers我建议使用Autoprefixer而不是萨斯混入的。

Autoprefixer接口很简单：根据最新的W3C规范，只需忘记供应商前缀并写入普通CSS即可。你不需要特殊的语言（如Sass）或特殊的混合语言。

由于Autoprefixer是CSS的后处理器，因此您还可以将其与预处理器（如Sass，Stylus或LESS）一起使用。

所以，你的情况，你只需要这样写：

@keyframes crank-up { 
    20%, 
    40% { -webkit-transform: translateY(34px); } 
    80% { opacity: .8; } 
    100% { -webkit-transform: rotate(360deg);} 
} 

而且autoprefixer自动将其转换为：

@-webkit-keyframes crank-up { 
    20%, 40% { 
    -webkit-transform: translateY(34px); 
    } 

    80% { 
    opacity: .8; 
    } 

    100% { 
    -webkit-transform: rotate(360deg); 
    } 
} 

@keyframes crank-up { 
    20%, 40% { 
    -webkit-transform: translateY(34px); 
    } 

    80% { 
    opacity: .8; 
    } 

    100% { 
    -webkit-transform: rotate(360deg); 
    } 
} 

Autoprefixer的广泛支持，你可以处理你的SCSS或css风格与此工具通过Compass，Grunt，Sublime Text，node.js，Ruby，Ruby on Rails，PHP ...

Here是关于项目

Answer 2

Bourbon，Compass，和compass-animation（W /北斗0.12）各自提供keyframes混入一种可正确作用域供应商前缀的详细信息。

Answer 3

如果您已经在使用Compass，并且不想加载整个反弹额外的库，只想写一些混合，THIS是最好的选择。

/* animation mixing 
keyframe animation 
@include animation('animation-name .4s 1')*/ 

@mixin animation($animate...) { 
$max: length($animate); 
$animations: ''; 

@for $i from 1 through $max { 
    $animations: #{$animations + nth($animate, $i)}; 

    @if $i < $max { 
     $animations: #{$animations + ", "}; 
    } 
} 
-webkit-animation: $animations; 
-moz-animation: $animations; 
-o-animation:  $animations; 
animation:   $animations; 
} 

，这里是关键帧混合到包括特定的浏览器厂商的前缀内CSS3属性，而不是@include翻译，我们使用完整的CSS（注：如果您使用的Sass 3.3或以上，你会需要删除!global标志）：

@mixin keyframes($animationName) { 
    @-webkit-keyframes #{$animationName} { 
     $browser: '-webkit-' !global; 
     @content; 
    } 
    @-moz-keyframes #{$animationName} { 
     $browser: '-moz-' !global; 
     @content; 
    } 
    @-o-keyframes #{$animationName} { 
     $browser: '-o-' !global; 
     @content; 
    } 
    @keyframes #{$animationName} { 
     $browser: '' !global; 
     @content; 
    } 
} $browser: null; 

供您参考这里是上海社会科学院例如：

@include keyframes(animation-name) { 
    0% { 
     #{$browser}transform: translate3d(100%, 0, 0); 
    } 
    100% { 
     #{$browser}transform: translate3d(0%, 0, 0); 
    } 
} 

在这里，你怎么包括动画的partic ular class or ids

.new-class { 
@include animation('animation-name 5s linear'); 
} 

就是这样。