Animate CSS Overlay to FadeIn and FadeOut

Question

Animate CSS Overlay to FadeIn and FadeOut

4.9k Views Asked by Ken Prince At 04 April 2025 at 05:37

I have a css overlay that covers the entire viewport when a button is clicked. It fadesIn from opacity: 0 to opacity: 1 using css keyframes.

The overlay is dependent upon a js plugin adding a class to the <body> element. So when that class is applied, the overlay is set to display: block

I'm trying to animate this effect in reverse. So when the class is removed, the overlay fades out.

I understand that I can apply multiple animations to the .overlay class, but I'm unsure how to proceed.

Any ideas how I might reverse the animation?

.overlay {
  // Overlay base styles
  position: fixed;
  background: rgba(0, 0, 0, 0.75);
  width: 100%;
  height: 100%;
  display: none;
  z-index: 999999;
  cursor: pointer;

  // Set transition for overlay
  -webkit-transition:         all 425ms ease-in-out;
  -moz-transition:            all 425ms ease-in-out;
  -ms-transition:             all 425ms ease-in-out;
  -o-transition:              all 425ms ease-in-out;
  transition:                 all 425ms ease-in-out;


  // Set the animation duration
  -webkit-animation-duration:   1.1s;
  -moz-animation-duration:      1.1s;
  -ms-animation-duration:       1.1s;
  -o-animation-duration:        1.1s;
  animation-duration:           1.1s;

  // Set the animation fill mode
  -webkit-animation-fill-mode:  both;
  -moz-animation-fill-mode:     both;
  -ms-animation-fill-mode:      both;
  -o-animation-fill-mode:       both;
  animation-fill-mode:          both;

  // Name the Animation
  -webkit-animation-name:       fadeIn;
  -moz-animation-name:          fadeIn;
  -ms-animation-name:           fadeIn;
  -o-animation-name:            fadeIn;
  animation-name:               fadeIn;
}

// When is showing class is applied
// make the overlay display block
.scotch-is-showing .overlay {
  display: block;
}

// Setup keyframes animations
// Chrome
@-webkit-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

// Firefox
@-moz-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

// Opera
@-o-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

// All other browsers
@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

Original Q&A

There are 1 best solutions below

**zgood** · Answer 1

I would probably utilize a helper class, and then toggle that class to trigger your animation.

Like this:

.overlay {
  // Overlay base styles
  position: fixed;
  background: rgba(0, 0, 0, 0.75);
  width: 100%;
  height: 100%;
  display: none;
  z-index: 999999;
  cursor: pointer;

  opacity: 0;

  -webkit-transition:         all 1.1s ease-in-out;
  -moz-transition:            all 1.1s ease-in-out;
  -ms-transition:             all 1.1s ease-in-out;
  -o-transition:              all 1.1s ease-in-out;
  transition:                 all 1.1s ease-in-out;
}
 .scotch-is-showing .overlay{
      display:block;
      opacity: 1;
    }

You don't need key-frames since its just changing opacity from 0 to 1.

Toggle the fadeIn class using javascript. Adding it will fade in the overlay and removing it will fade it out.

using jQuery it might look like this:

$('.overlay').toggleClass('fadeIn');

UPDATE

I missed the part about the plugin and the display toggle. This should still work, you just don't have to worry about the javascript toggle. I have updated the css selector in the above css. display doesn't transition but opacity does.

Animate CSS Overlay to FadeIn and FadeOut

There are 1 best solutions below

Related Questions in CSS

Related Questions in ANIMATION

Related Questions in CSS-ANIMATIONS

Related Questions in KEYFRAME

Trending Questions

Popular # Hahtags

Popular Questions