LESS：混入创建闪烁的动画，通过@color -stops(LESS: mixin to crea

我想创建一个CSS动画像“闪烁效果”少用。 我的目的是呼吁一个混入经过每次2 @stop颜色顺序根据由CSS类DOM元素来获得diffent颜色闪烁。

目前，我有以下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:

刚刚成立的动画名称，明确，如（ codepen演示 ）：

.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}
    }
}

文章来源: LESS: mixin to create Blink animation, passing @color -stops