css animation in two separate classes
<p>The issue seems to be simple. </p>

<p>Using this code the animation works:</p>

<pre><code>&lt;div class="merged" &gt;&lt;/div&gt;
.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%}
     }

}
</code></pre>

<p>And when the anim is separated into another class, it doesn't:</p>

<pre><code>&lt;div class="colors animation" &gt;&lt;/div&gt;
.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%}
     }

}
</code></pre>

<h3>To do:</h3>

<p>How to make the animation work and serve it as a separate class?</p>

<p>Thank you</p>