LESS：mixin創建Blink動畫，傳遞@color -stops

Question

我希望使用LESS創建一個類似「Blink效果」的CSS動畫。我的目的是每次調用一個mixin顏色以獲得不同的顏色閃爍，這取決於CSS元素的CSS類。

目前，我有以下的HTML：

<p class='blink'> 
    Loading... 
    </p> 

    <p class='blink alert'> 
    <big>WARNING!!!! Operation failed.</big> 
    </p> 

這裏，更少的代碼：

.blink 
{ 
    .animation-blink-mixin(@dark-green,@light-green); 

    &.alert 
    { 
    .animation-blink-mixin(@dark-red,@light-red); 
    } 
} 

ANIMATION MIXIN：

.animation-blink-mixin (@stop1, @stop2, @time:2s) 
{ 
    animation:animation-blink @durata infinite; 

    .steps() 
    { 
     0% { color:@stop1; } 
    50% { color:@stop2; } 
    100% { color:@stop1; } 
    } 

    @keyframes animation-blink { .steps(); } 
} 

我的問題是，無論是DOM元素具有相同的「紅色」動畫，而不是一個green2green和其他人red2red。

我明白，問題是在「動畫名稱」，總是相同的。一些建議達到預期的行爲？

謝謝。

Answer 1

只需設定動畫的名稱，明確，e.g（codepen demo）：

.blink { 
    .animation-blink(blink, #080 + 200, #080); 
    &.alert { 
     .animation-blink(alert, #800, #800 + 200); 
    } 
} 

.animation-blink(@name_, @color1, @color2, @time: .5s) { 

    @name: ~"animation-blink-@{name_}"; 
    animation: @name @time ease-in-out infinite alternate; 

    @keyframes @name { 
     0% {color: @color1} 
     to {color: @color2} 
    } 
}