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

小编典典

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

css

我有以下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之类的东西来帮我这样做，但是我需要添加到我的混入中以使其与最广泛的浏览器兼容吗？

阅读 252

2020-05-16

共1个答案

小编典典

鉴于：

我没有问使用类似autoprefixer的东西

这取决于[您要支持的 浏览器和版本：

-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，然后清楚地定义希望支持的浏览器及其（旧版）版本。这样做的好处是，您的源中不太可能包含以后可能与您（以及您的最终用户群）无关的项目，并且消除了正确包含正确的实现的担忧。

2020-05-16