LESS：合并多个 CSS3 动画

Question

我在 LESS 中定义了 2 个 CSS 动画：

.color_animation (@color, @time:1s)
{
  @stop-1:~"@{color}_SOPRA";
  @stop-2:~"@{color}_SOTTO";

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

  .steps()
  {
      0% { color:@@stop-1; }
     50% { color:@@stop-2; }
    100% { color:@@stop-1; }
  }

  @keyframes @name { .steps(); }
}


.zoom_animation (@ratio, @time:1s)
{  
  @zoom-ratio:round(@ratio*100);
  @name: ~"zoom-@{zoom-ratio}";

  animation:@name @time ease-in-out infinite alternate;

  .steps()
  {
      0% { .scale(1.0); }
     50% { .scale(@ratio); }
    100% { .scale(1.0); }
  }

  @keyframes @name { .steps(); }
}

每一个都被不同的 CSS class:

.blink
{
  .color_animation(red);
}

.animated-zoom
{
  .zoom_animation(1.05);
}

我希望能够同时执行其中之一或两者，将 css class 中的一个或两者添加到 DOM 元素，例如：

<p class='blink'>Loading...</p>
<p class='animated-zoom'>Highlight</p>
<p class='blink animated-zoom'>Data not Saved!!!</p>

但在最后一种情况下，第二个动画覆盖了第一个。

在添加了两个 class 的特殊情况下如何组合它们？

Answer 1

感谢@seven-phases-max的建议，我详细阐述了一个可能的解决方案，pipelining动画以防不止一个CSS class 分配给一个元素。

这是我的原始代码（现在稍作修改），我在专用 COMMONS mixin 中移动了公共部分：

.color_animation (@color, @time:1s)
{
  @stop-1:~"@{color}_SOPRA";
  @stop-2:~"@{color}_SOTTO";

  @name: ~"blink-@{color}";

  .steps()
  {
      0% { color:@@stop-1; }
    100% { color:@@stop-2; }
  }

  @value:@name @time ease-in-out infinite alternate;

  .INITIALIZE_keyframes();
  .CALL_animation();
}


.zoom_animation (@ratio, @time:1s)
{  
  @zoom-ratio:round(@ratio*100);
  @name: ~"zoom-@{zoom-ratio}";

  .steps()
  {
      0% { .scale(1.0); }
    100% { .scale(@ratio); }
  }

  @value:@name @time ease-in-out infinite alternate;

  .INITIALIZE_keyframes();
  .CALL_animation();
}

这里是 COMMONS mixins 声明（为简单起见，我缺少浏览器浏览器前缀，但可以在此处添加它们）：

.INITIALIZE_keyframes()
{
  @keyframes @name { .steps(); }
}

.CALL_animation()
{
  animation+:@value;
}

请注意'+'登录animation声明，这是我解决方案的secret，加上以下CSS classes声明：

.blink
{
  .color_animation(red);
}

.animated-zoom
{
  .zoom_animation(1.05);
}

.blink
{
  &.animated-zoom
  {  
    .color_animation(red);
    .animated-zoom;
  }
}

Answer 2

发布的答案很棒，帮助我找到了自己的问题解决方案。我使用通用关键帧和动画混合来创建我的动画，如下所示：

// Generic keyframe class
.keyframes(@name; @arguments) {
    @-moz-keyframes @name { @arguments(); }
    @-webkit-keyframes @name { @arguments(); }
  @-ms-keyframes @name { @arguments(); }
  @-o-keyframes @name { @arguments(); }
    @keyframes @name { @arguments(); }
}

// Generic animation class
.animation(@arguments) {
    -webkit-animation+: @arguments;
    -moz-animation+: @arguments;
  -ms-animation+: @arguments;
  -o-animation+: @arguments;
    animation+: @arguments;
}

注意 .animation class 中的 +。然后我可以像这样快速构建动画：

// Fade in animation
.fadeIn() {
  .keyframes(fade-in; {
    from { opacity: 0; }
    to   { opacity: 1; }
  });

  .animation(fade-in 1.5s);
}

// Pan animation
.pan() {
  .keyframes(pan; {
    from { transform: translateX(-2%); }
    to { transform: translateX(2%); }
  });

  .animation(pan 5s infinite alternate ease-in-out);
}

现在如果我想一起使用动画，我可以简单地将它们添加到现有的 class、元素等：

.multipleAnimations {
   .fadeIn();
   .pan();
}

LESS：合并多个 CSS3 动画

LESS: Combine multiple CSS3 animation

less

css-animations