-1

Suppose that I have a div element and I would like the opacity of the background color element (not the text) to be gradually increased in a given amount of time (not immediate change), where the initial opacity is 0, and the ending opacity to be either 1 or a smaller decimal like 0.7.

For instance, I would like the background-color of a div to be from rgba(90, 129, 229, 0) to rgba(90, 129, 229, 3) in 3 seconds.

I tried making a the opacity value @keyframes, but I would like it to target only the background color.

I would like a solution in vanilla HTML and CSS. Thanks. Please let me know if the explanation of the question is too simple and more information is needed.

SomeRandomCoder
  • 21
  • 6
  • 1
    do you have a trigger like hover, click, etc ? or you just want this happen after page loading? – Mahdi Jul 31 '21 at 22:25
  • Sorry, but I asked for the gradual change in opacity in a fixed amount of time, like 3 seconds. @Mahdi, I am planning to have if triggered through a function in my JS file, so no, not necessarily after the loading of the page.. – SomeRandomCoder Jul 31 '21 at 22:28
  • If it’s just a solid background color that you want to fade from transparent to some % opacity then you would either use a transition or a keyframe animation (depending on the use case, more info would be helpful). You’d set the initial color to some rgba value where rgb is your color value and a is your alpha/opacity. Initial a would be 0. Ending value would be same rgb with different a value. Sorry, I’m typing this from my phone… – Aaron Sarnat Jul 31 '21 at 22:32
  • @maqam7 I've tried it before using keyframes, but it didn't work. Could you provide a solution? – SomeRandomCoder Jul 31 '21 at 22:36
  • Others already added keyframe solutions. I just added a transition solution. Good luck! – Aaron Sarnat Jul 31 '21 at 23:28

3 Answers3

0

I did an example in codepen below there is the code https://codepen.io/Eros-C/pen/NWjzGOB

HTML

<div class="form"></div>

CSS

.form{
   width:100px;
   height:100px;
   animation: animatedColor 3s linear;
}

@keyframes animatedColor{
   0%{
     background-color: rgba(90, 129, 229, 0);
   }
   100%{
     background-color:rgba(90, 129, 229, 3);
   }

}

Eros-Capo
  • 26
  • 8
0

If the background is a color you can simply do:

.background {
  background-color: black;
  animation:fade 3s forwards;
}

@keyframes fade {
  to {
    background-color: white;
  }
}
<div class="background">
  Hello World!
</div>

If the background is an image, you'll have to position a layer on top of the background image that uses rgba() to change the opacity:

.background{
  background:url(https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=24&d=identicon&r=PG&f=1);
}

.layer{
  height:100%;
  width:100%;
  background-color:rgba(255, 255,255,0);
  animation:fade 3s forwards;  
}

@keyframes fade{
  to{
  background-color:rgba(255, 255,255,1);
  {
}
<div class="background">
  <div class="layer">
    Hello World!
  </div>
</div>
Spectric
  • 30,714
  • 6
  • 20
  • 43
0

Transition might be all you need:

document.querySelector('#toggle').addEventListener('click', () => {
  document.querySelector('#fade-box').classList.toggle('faded');
});
/* The relevant CSS: */

#fade-box {
  background-color: rgba(255,0,0,0);
  transition: background-color 3s ease;
}

#fade-box.faded {
  background-color: rgba(255,0,0,0.7);
}


/* Throwaway styles for working example: */

body {
  background: #655b54 url(https://mars.nasa.gov/imgs/mars2020/jezero-overview.jpg) center center / cover no-repeat;
}

#fade-box {
  font: bold 20px Arial, sans-serif;
  width: 120px;
  height: 120px;
  border: 2px solid white;
  padding: 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}
<div id="fade-box">My background fades</div>
<button id="toggle">Click Me to Fade!</button>
Aaron Sarnat
  • 1,207
  • 8
  • 16