Div's gradient background transition without it becoming transparent

Question

I'm making a js player and I have html containers representing songs. Inside this containers I also have menu appended. On click song's container has selected class added to it's classList, changing color of background (not background-color ) with transition. The problem is that on click div becomes transparent (loses its old background property for a moment I suppose) and then transitions to a new background color. It makes the upper edge of menu visible during transition. I wanted to know is there a way to have background changed without this moment of transparency.

JSfiddle: https://jsfiddle.net/8d12hu3r/14/

 container = document.getElementById('songContainer'); container.addEventListener('click', function() { container.classList.add('selected'); }); 

 #songContainer { width: 100%; height: 100%; min-width: 100%; position: relative; background: -webkit-linear-gradient(left, rgb(223, 228, 248), rgb(223, 228, 248), rgb(223, 228, 248)); /*background: rgb(223, 228, 248);*/ text-align: center; border-radius: 10px; font-size: 15px; padding: 10px; transition-duration: 5s; } .selected { color: white; background: #2b3492 !important; transition: 5s; } #menuBump { position: absolute; width: 100%; bottom: 0px; left: 0px; } #songMenu { border-radius: 0px 0px 10px 10px; /*display: table;*/ min-width: 100%; position: absolute; left: 0px; top: 0px; /*bottom: 0px;*/ padding-bottom: 10px; padding-top: 10px; z-index: 10; background: #fff1e3; } .songMenu-item { background: inherit; color: black; padding: 10px; transition-duration: 5s; } .songMenu-item:hover { font-weight: bold; background: #ac4d8f; } 

 <div id="song-menu-container" style="position: relative; height: 20px;"> <div id="songContainer" style="z-index: 10000">Gehou</div> <div id="menuBump"> <div id="songMenu"> <div class="songMenu-item" data-id="2">Nise</div> <div class="songMenu-item" data-id="5">asdf</div> <div class="songMenu-item" data-id="8">zcdaaassdasd</div> </div> </div> </div> 

I did also try changing background property itself with js, but the result is the same.

Answer 1

This is happening because you are using background and not background-color . More specifically:

1. background is a shorthand for multiple properties. The liner gradient you are using is a background-image while the solid color you're transitioning to is a background-color . So you're transitioning two different things, which won't work.
2. Even if you tried to transition to a different linear gradient, it still wouldn't work because you simply can't transition gradients.

Fortunately the solution in your case is very simple: the linear gradient you are using isn't actually a gradient at all – it's the same color all the way across – so you can just replace it with a background color and then everything will work fine. The commented-out code you have right below the gradient is exactly what you want.

If you were trying to find out how to transition a gradient, since you can't do that directly, you'd have to do a more elaborate workaround. For example, you could overlay a semi-transparent color on a gradient to mimic the look you want, then transition that overlay so it completely covers the gradient below it.

Answer 2

@keyframes example {
  from {opacity: 0.5;}
  to {opacity: 1;}
}


#songContainer {
  animation-name: example;
  animation-duration: 4s;
}

i think this can give you an idea of what you can do