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位）上测试

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

希望这有帮助！

css动画分为两个不同的类

要做：

1 个答案: