Css @将不同浏览器版本合并为一个版本的关键帧
是否可以减少代码以生成一组可以处理各种浏览器前缀的mixin 尝试减少代码长度以使用更多混合 所以不是Css @将不同浏览器版本合并为一个版本的关键帧,css,sass,Css,Sass,是否可以减少代码以生成一组可以处理各种浏览器前缀的mixin 尝试减少代码长度以使用更多混合 所以不是 @-moz-keyframes orbit { 0% { opacity: 1; z-index:99; -moz-transform: rotate(180deg); -moz-animation-timing-function: ease-out; } } @-ms-keyframes orbit {
@-moz-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-moz-transform: rotate(180deg);
-moz-animation-timing-function: ease-out;
}
}
@-ms-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-ms-transform: rotate(180deg);
-ms-animation-timing-function: ease-out;
}
}
@-o-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-o-transform: rotate(180deg);
-o-animation-timing-function: ease-out;
}
}
@-webkit-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-webkit-transform: rotate(180deg);
-webkit-animation-timing-function: ease-out;
}
}
我们有更像这样的吗
@keyframes orbit {
0% {
opacity: 1;
z-index:99;
-moz-transform: rotate(180deg);
-moz-animation-timing-function: ease-out;
-o-transform: rotate(180deg);
-o-animation-timing-function: ease-out;
-ms-transform: rotate(180deg);
-ms-animation-timing-function: ease-out;
-webkit-transform: rotate(180deg);
-webkit-animation-timing-function: ease-out;
transform: rotate(180deg);
animation-timing-function: ease-out;
}
}
在SASS中,您可以使用以下模板:
@mixin keyframes($animation-name) {
@-webkit-keyframes $animation-name {
@content;
}
@-moz-keyframes $animation-name {
@content;
}
@keyframes $animation-name {
@content;
}
}
它应该让你开始 干得好,很高兴能帮上忙!浏览器支持始终取决于您的项目所需的内容,因此您可以在此基础上选择使用哪种技术,并最终为较旧的浏览器提供后退/多边形填充(请阅读:IE)