轉換隻接受來自與關鍵幀選擇一個mixin接受多個關鍵幀選擇

Question

我有這樣的減混入：

.keyframes (@name, @fromRules, @toRules) { 
    @-webkit-keyframes ~'@{name}' { from { @fromRules(); } to { @toRules(); } } 
      @keyframes ~'@{name}' { from { @fromRules(); } to { @toRules(); } } 
} 

我呼籲例如：

.keyframes(fade-in, 
    { 
     opacity: 0; 
    }, 
    { 
     opacity: 1; 
    } 
); 

結果是：

@-webkit-keyframes fade-in { 
    from { 
    opacity: 0; 
    } 
    to { 
    opacity: 1; 
    } 
} 
@keyframes fade-in { 
    from { 
    opacity: 0; 
    } 
    to { 
    opacity: 1; 
    } 
} 

但我怎樣才能使用較少的mixins，因此我可以使用不同於0％，100％和多於2個關鍵幀的關鍵幀選擇器s選擇器，所以結果如下所示：

@keyframes fade-in { 
    0% { 
    opacity: 0; 
    } 
    50% { 
    opacity: 0.5; 
    } 
    100% { 
    opacity: 1; 
    } 
} 

感謝您的幫助。

Answer 1

你可以通過傳遞規則，關鍵幀選擇的整個列表（如0%，50%，100%等）作爲一個單一的規則設定動畫的名稱一起到混入實現這一目標。

另外正如在評論中提到的seven-phases-max，不是必需的，它可以簡寫爲@-webkit-keyframes @name。

.keyframes (@name, @rules) { 
    @-webkit-keyframes @name { @rules(); } 
      @keyframes @name { @rules(); } 
} 

div{ 
    .keyframes(fade-in, 
    { 
     0% { opacity: 0;} 
     50% { opacity: 1;} 
     100% { opacity: 0;} 
    }); 
} 

CodePen Demo - 點擊在CSS框眼睛圖標，查看編譯後的輸出。

注：

• Passing rulesets to a mixin欠V1.7.0引入，因此上面的代碼不會以較低的版本。