LESS：mixin 创建闪烁动画，通过 @color -stops答案

【问题标题】：LESS: mixin to create Blink animation, passing @color -stopsLESS：mixin 创建闪烁动画，通过 @color -stops
【发布时间】：2015-03-19 11:02:29
【问题描述】：

我希望使用 LESS 创建一个类似于“闪烁效果”的 CSS 动画。我的目的是调用单个 mixin，每次传递 2 个 @stop 颜色，以便根据 DOM 元素的 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-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。

我知道问题在于始终相同的“动画名称”。有什么建议可以达到预期的行为？

谢谢。

【问题讨论】：

标签： less css-animations mixins less-mixins

【解决方案1】：

只需明确设置动画名称，例如 (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}
    }
}

【讨论】：

你永远是我的英雄！ :-)
数字 200 是干什么用的？
@iamchriswick Try yourself? （这只是一种使颜色变亮的简短方法，例如#800 + 200 -> #ffc8c8 aka rgb(255, 200, 200)）。