你应该如何在CSS3动画中为变换属性加前缀？

我有下面的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,然后清楚地定义您希望支持哪些浏览器和(旧版)版本.这样做的好处是,您的源代码不太可能包含可能在以后与您(以及您的最终用户群)无关的项目,并且正确包含正确实现的担心被抽象掉.

原文地址：https://www.jb51.cc/css/217720.html