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

它應該讓你開始！