Web Animation, how to animate the background rgba color

Question

I want to animate the background color in rgba for a modal so it fades in. I cant use opacity as the div inside the modal I dont want to be transparent. I cant use Jquery but I am using React.

I'm not getting an error by the below does not work

const modal = document.getElementById('modal');
modal.animate(
[
  {backgroundColor: 'rgba(255, 0, 0, 0)'}, 
  {backgroundColor: 'rgba(255, 0, 0, 0.8)'}
], 
  {duration: 200, easing: 'ease-in-out', fill: 'forwards'}
);

This code works for me. Can you share an [MCVE](https://stackoverflow.com/help/mcve)? — shkaper, Sep 02 '19 at 05:05
After exploring the solution below, I discovered that it did work, I just couldn't see it as I had the opacity set to 0 — Bill, Sep 02 '19 at 08:02

Rakibul Islam · Accepted Answer · 2019-09-02T08:00:28.523

0

Use setInterval function to change color in javascript.

var change=0;
var colorEvent= setInterval("changeColor();", 50);
function changeColor(){
  if(change<100){           
      document.getElementById("modal").style.backgroundColor="rgb(255,0,"+change+")";
  }
  else 
    clearInterval(colorEvent);
  change+=1;
  console.log(change);
}

#modal{
    height:50px;
    background-color:rgb(255,0,0);
}

<div id="modal"></div>

or changing opacity

var change=0.0;
if(change<0.8){
  setInterval(function(){
      document.getElementById("modal").style.backgroundColor="rgb(255,0,0,"+change+")";
      change+=0.01;
  }, 10);
}

#modal{
    height:50px;
    background-color:rgb(255,0,0,0);
}

<div id="modal"></div>

edited Sep 02 '19 at 08:00

answered Sep 02 '19 at 06:41

Rakibul Islam

679
9
18

Genius solution, I love it cant believe I didnt think of it. I had tho change the rgb to rgba for the opacity change, but yes! – Bill Sep 02 '19 at 07:44
I see the setinterval never stops running, how to stop it? – Bill Sep 02 '19 at 07:46
@Bill, I have updated first snippet. Check it again. – Rakibul Islam Sep 02 '19 at 08:01

Web Animation, how to animate the background rgba color

1 Answers1