减:合并多个CSS3动画

Question

我有两个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类调用：

.blink
{
  .color_animation(red);
}

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

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

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

但是在最后一个例子中，第二个动画覆盖了第一个动画。

在添加两个类的特殊情况下，如何将它们组合起来？

Answer 1

由于@seven-phases-max's的建议，我阐述了一种可能的解决方案，在多个CSS类被分配到一个元素的情况下，流水线化动画。

这里是我的原始代码(现在稍微修改了一下)，在其中，我在专用共用混合器中移动公共部分：

.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声明(我缺少浏览器的前缀，只是简单起见，但是可以在这里添加它们)：

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

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

请注意+声明中的‘animation +’符号，它是我的解决方案的秘密，再加上以下CSS类声明：

.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。然后我就可以像这样快速地构建动画：

// 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);
}

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

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