你应该如何在CSS3动画中前缀转换属性？ [英] How should you prefix transform properties in CSS3 animations?

问题描述

我有以下Sass的代码片段，它像一个魅力，但我想知道我是否需要为我的变换属性添加前缀，如果是，如何？ （如果没有，为什么不？）

I have the following snippet of Sass that works like a charm, but I wonder if I need to prefix my transform properties, and, if so, how? (if not, why not?)

@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这样的东西，为我做这个，但我需要添加到我的混合，使这兼容最广泛的浏览器？

Please note I'm not asking about using something like autoprefixer, etc., to do this for me, but what I would need to add to my mix-in to make this compatible with the widest range of browsers?

推荐答案

鉴于：

p>

Im not asking about using something like autoprefixer

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

It depends on which browsers and which versions you want to support:

-ms - 可以用于IE9（下面的IE9是不支持的）但是，动画只支持在IE10 +，因此，如果你是动画的转换，包括 ms 前缀是冗余

-ms- can be used for IE9 (below IE9 is not supported at all) however, animations are only supported in IE10+, as such, if you are animating a transform including the ms prefix is redundant

-webkit - 可用于Chrome 35,31，Safari和Android浏览器

-webkit- can be used for Chrome 35, 31, Safari and android browsers

@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，然后清楚地定义哪些浏览器和（旧版）您希望支持。这样做的优点是，您的源不太可能包含可能在以后的日期变得与您（和您的最终用户基础）不相关的项目，并且正确包括正确的实现的担心被抽象化。

Generally solutions like autoprefixer are highly recommended because they allow you to write clean CSS then to clearly define which browsers and (legacy) versions thereof you wish to support. The advantage of this is that your source is then less likely to include items which may at a later date become irrelevant to you (and your end user base), and the worry of correctly including the right implementations is abstracted away.

这篇关于你应该如何在CSS3动画中前缀转换属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！