css - Screen overlay effect with animation (show from right to left)

Question

I have the following overlay

<div id="overlay"></div>

#overlay {
  position: fixed; 
  display: none; 
  width: 100%; 
  height: 100%;
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); 
  z-index: 2; 
  cursor: pointer; 
}

Which pops up instantly. I would like to make this overlay cover the screen with an animation effect, appear from right to left within 1000 miliseconds.

I understand this is feasible with jQuery but I dont want to install it in my Angular app. Is it possible to make it with typescript together with CSS?

Thanks.

question from:https://stackoverflow.com/questions/65623638/screen-overlay-effect-with-animation-show-from-right-to-left

Answer 1

Yes, you can use animation with @keyframes:

#overlay {
  position: fixed; 
  width: 100%; 
  height: 100%;
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); 
  z-index: 2; 
  cursor: pointer;
  
  animation: slide-in 1s both;
}

@keyframes slide-in {
  from {
    transform: translateX(100%);
  }
  
  to {
    transform: translateX(0);
  }
}

<div id="overlay"></div>