Divi - CSS rule for an overlay (with animation)

style.css

.background-fade .et_pb_slide.et_pb_bg_layout_dark:after {
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  animation: customFadeToDark 3s ease-out 1s 1 both;
  -webkit-animation: customFadeToDark 3s ease-out 1s 1 both;
}
@keyframes customFadeToDark {
  0% {
    background-color: transparent;
  }
  100% {
    background-color:rgba(0,0,0,.5);
  }
}
-webkit-@keyframes customFadeToDark {
  0% {
    background-color: transparent;
  }
  100% {
    background-color:rgba(0,0,0,.5);
  }
}

.background-fade .et_pb_slide.et_pb_bg_layout_light:after {
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  animation: customFadeToLight 3s ease-out 1s 1 both;
  -webkit-animation: customFadeToLight 3s ease-out 1s 1 both;
}
@keyframes customFadeToLight {
  0% {
    background-color: transparent;
  }
  100% {
    background-color:rgba(255,255,255,.7);
  }
}
-webkit-@keyframes customFadeToLight {
  0% {
    background-color: transparent;
  }
  100% {
    background-color:rgba(255,255,255,.7);
  }
}