How can I make a background color change on click and then fade out to a linear gradient?

Question

I have a radio button inside of a div:

<div> 
<input type='radio' class='radio-btn'>
</div>

The background of the div is a linear gradient:

background-image: linear-gradient(to bottom, #ffffff, #fdfdfd, #fbfcfb, #fafafa, #f8f8f8, #f5f5f5, #f1f1f1, #eeeeee, #e8e8e8, #e1e1e1, #dbdbdb, #d5d5d5);

When I click on the input button, I want to change the background of the containing div to GREEN without a transition, then immediately have the green fade out and go back to the original linear gradient.

So far this is what I have:

let radioBtn = document.querySelector('.radio-btn');

radioBtn.addEventListener('click', function(e){

function changeColor(){
                    e.target.parentElement.style.transition = '0s';
                    e.target.parentElement.style.background = 'green';
                  }
    
                  function fadeColor(){
                    e.target.parentElement.style.transition = '0.3s';
                    e.target.parentElement.style.background = 'linear-gradient(to bottom, #ffffff, #fdfdfd, #fbfcfb, #fafafa, #f8f8f8, #f5f5f5, #f1f1f1, #eeeeee, #e8e8e8, #e1e1e1, #dbdbdb, #d5d5d5)';
                  }
    
                  changeColor();
                  setTimeout(fadeColor, 100);
})

This changes the color to green, waits 100ms, then changes it back to the original linear gradient but without the transition. I've tinkered with the code but cannot get it to fade out...is there another way to do this?

Thanks!

Answer 1

While you cannot directly transition linear-gradients or animate background-images, you can animate opacity to make things fade in and out.

Using the before and after pseudo elements of the div to hold its linear-gradient background image and the green background color we can get them to fade in and out as required using CSS animations.

let radioBtn = document.querySelector('.radio-btn');

radioBtn.addEventListener('click', function(e){

                  function changeColor(){
                    e.target.parentElement.style.backgroundColor = 'green';
                    e.target.parentElement.classList.remove('fadein');
                  }
    
                  function fadeColor(){
                    e.target.parentElement.style.backgroundColor = 'transparent';
                    e.target.parentElement.classList.add('fadein');
                  }

                  changeColor();
                  setTimeout(fadeColor, 100);
})

div
 {
 position: relative;
}


div:before, div:after {
  position: absolute;
  z-index: -1;
 content: '';
 width: 100%;
 height: 100%;
 animation-duration: .3s;
 animation-name: none;
 animation-iteration-count: 1;
 animation-fill-mode: forwards;
 }
 
div:before {
  opacity: 1;
  background-image: linear-gradient(to bottom, #ffffff, #fdfdfd, #fbfcfb, #fafafa, #f8f8f8, #f5f5f5, #f1f1f1, #eeeeee, #e8e8e8, #e1e1e1, #dbdbdb, #d5d5d5);
}

div.fadein:before {
  animation-name: fadeIn;
}

div:after {
  opacity: 0;
  background-color: green;
}

div.fadein:after {
  animation-name: fadeOut;
}

@keyframes fadeIn {
   0% {
     opacity: 0;
     }
 100% {
     opacity: 1;
     }
}

@keyframes fadeOut {
   0% {
     opacity: 1;
     }
 100% {
     opacity: 0;
     }
}
@keyframes none {
  0% {
  }
  100% {
  }
  }

<div> 
<input type='radio' class='radio-btn'>
</div>