Changing gradient colors of an animated background - css

Question

I have an animated gradient background, and I want to override the original color by applying an other class. When I apply this new class, the animation stops.
See the code below and try to add the oc class to the div to reproduce.
.background {
background: linear-gradient(
to right,
#eee9e5 20%,
red 50%,
#eee9e5 80%
);
background-size: 400% 400%;
height: 16px;
margin: 16px 0;
}
.oc {
background: linear-gradient(
to right,
#eee9e5 20%,
blue 50%,
#eee9e5 80%
) !important;
}
.animated {
animation: move 4s ease-in infinite;
}
#keyframes move {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
<div class="background animated" />
You can also see the code at https://codepen.io/Taskim/pen/KegLmJ.
Do you know any workaround to achieve that?

Answer 1

The problem is with the use of the !important on the background rule.
The background is a short-hand property that alters all the background-* properties.
So when you set background: linear-gradient(...)!important you override the background-position as well and setting it to default values that cannot be animated since they are more important.
Use background-image: linear-gradient(...) and it should work.
document.querySelector('button').addEventListener('click', function() {
document.querySelector('.animated').classList.toggle('oc');
})
.background {
background: linear-gradient( to right, #eee9e5 20%, red 50%, #eee9e5 80%);
background-size: 400% 400%;
height: 16px;
margin: 16px 0;
}
.oc {
background-image: linear-gradient( to right, #eee9e5 20%, blue 50%, #eee9e5 80%);
}
.animated {
animation: move 4s ease-in infinite;
}
#keyframes move {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
<div class="background animated"></div>
<button>toggle gradient</button>
Also keep in mind that you cannot self-close a div (unless that is not real html but some template from a framework)