@keyframes将不同的浏览器版本合并为一个

Question

是否可以减少代码以生成一组可以处理各种浏览器前缀的mixin？

试图减少代码长度使用更混入

所以不是

@-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; 
    } 
} 

Answer 1

在SASS，你可以使用这个模板：

@mixin keyframes($animation-name) { 
    @-webkit-keyframes $animation-name { 
    @content; 
    } 
    @-moz-keyframes $animation-name { 
    @content; 
    } 
    @keyframes $animation-name { 
    @content; 
    } 
} 

它应该让你开始！