我有下面的Sass片段就像一个魅力,但我想知道我是否需要为我的变换属性添加前缀,如果是,如何？ (如果没有,为什么不呢？)
@mixin expand-o-band() {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(2); }
}
@-webkit-keyframes expand-o-band { @include expand-o-band(); }
@-moz-keyframes expand-o-band { @include expand-o-band(); }
@-o-keyframes expand-o-band { @include expand-o-band(); }
@keyframes expand-o-band { @include expand-o-band(); }
.circle-thing {
-webkit-animation: expand-o-band 1.5s infinite; /* Safari 4+ */
-moz-animation: expand-o-band 1.5s infinite; /* Fx 5+ */
-o-animation: expand-o-band 1.5s infinite; /* Opera 12+ */
animation: expand-o-band 1.5s infinite; /* IE 10+,Fx 29+ */
}
请注意我不是要求使用autoprefixer之类的东西来为我做这个,但我需要添加到我的混音中以使其与最广泛的浏览器兼容？
解决方法
鉴于：
Im not asking about using something like autoprefixer
这取决于哪些浏览器和which versions you want to support：
-ms-可以用于IE9(完全不支持IE9以下)但是,动画仅在IE10中受支持,因此,如果要动画转换,包括ms前缀是多余的
-webkit-可用于Chrome 35,31,Safari和Android浏览器
@mixin expand-o-band() {
0% {
opacity: 1;
-ms-transform: scale(1); /* <--- not necessary */
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-ms-transform: scale(2); /* <--- not necessary */
-webkit-transform: scale(2);
transform: scale(2);
}
}
通常强烈推荐像autoprefixer这样的解决方案,因为它们允许您编写干净的CSS,然后清楚地定义您希望支持哪些浏览器和(旧版)版本.这样做的好处是,您的源代码不太可能包含可能在以后与您(以及您的最终用户群)无关的项目,并且正确包含正确实现的担心被抽象掉.
