标准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
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@content;
}
@-ms-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}
只要没有关键帧包含需要供应商前缀的属性,上面就可以了.与transform属性一样,所有供应商前缀关键帧都应用了(在本例中)-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); } }
请注意上面的-webkit-和-moz-keyframe.应该是-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};
}
}
打电话给mixin看起来像
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和更新的compass-animate,但不确定这些是否有用.我需要一些方法来添加变量并使用mixin测试它,但不知道是否可以将变量传递给mixins.
任何帮助非常感谢.谢谢
我一直在玩以下但是没有工作,只是想我会把它们加起来看看是否有人知道我哪里出错了.
实验混合物：
@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};
}
}
解决方法
Autoprefixer interface is simple: just forget about vendor prefixes and write normal CSS according to latest W3C specs. You don’t need a special language (like Sass) or special mixins.
Because Autoprefixer is a postprocessor for CSS,you can also use it with preprocessors,such as Sass,Stylus or 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得到广泛支持,您可以使用此工具通过Compass,Grunt,Sublime Text,node.js,Ruby,Ruby on Rails,PHP处理您的scss或css样式…
Here是关于该项目的更多信息
