两个单独类中的 css 动画

Question

问题看起来很简单。

使用这段代码动画工作:

<div class="merged" ></div>
.merged {
     width:20rem;
     height:20rem;
     background: linear-gradient(297deg, #413f3d, #373533, #413f47, #8f6fee);
     color: @step4 !important;

     background-size: 800% 800%;
     animation: animbg 6s ease infinite;
     @keyframes animbg { 
         0%{background-position:0% 26%}
         50%{background-position:100% 75%}
         100%{background-position:0% 26%}
     }

}

当动画被分离到另一个类时，它不会:

<div class="colors animation" ></div>
.colors {
     width:20rem;
     height:20rem;
     background: linear-gradient(297deg, #413f3d, #373533, #413f47, #8f6fee);
     color: @step4 !important;
     }

.animation{
     background-size: 800% 800%;
     animation: animbg 6s ease infinite;
     @keyframes animbg { 
         0%{background-position:0% 26%}
         50%{background-position:100% 75%}
         100%{background-position:0% 26%}
     }

}

要做的事情:

如何使动画工作并将其作为单独的类提供？

谢谢

Answer 1

如果我遗漏了一些明显的东西，请提前致歉。我想我的动画效果很好 http://codepen.io/panchroma/pen/BLzYxB

在 OSX Safari 和 Chrome 版本 52.0.2743.116(64 位)上测试

除了我在第 1 行明确定义了变量 @step4 的值外，CSS 与您发布的内容完全相同。我不确定您对这种颜色的意图是什么所以我从你的动画中选择了一个值。

希望这对您有所帮助!