Can't click until the background fades away fully

How it should work is, not able to click until the background fades away fully.

Is there a right way to do this if it is a youtube video?

Code 1) This way seems to work.

I would want the pointer-events property to be set to none only at the end of the animation (100% keyframe), then, this should be the code to go with.

https://jsfiddle.net/ykqjfru1/

  animation: fadeOut 2s ease-in 700ms forwards;
  animation-delay: 1s;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    pointer-events: none;
  }
}

Code 2)

Using initial doesn’t seem to work at all in the code, unless I’m doing it wrong.

Because it is a youtube video, initial should not be used?

Nothing is able to be clicked.

https://jsfiddle.net/eyL3f6wt/

  animation: fadeOut 2s ease-in 700ms forwards;
  animation-delay: 1s;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    pointer-events: initial;
  }
}

Code 3)

I also tried this way: https://jsfiddle.net/z9dta0sr/1/

animation: fadeOut 2s ease-in 700ms forwards;
  animation-delay: 1s;
   pointer-events: none;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
     pointer-events: none;
  }
  100% {
    opacity: 0;
    pointer-events: initial;
  }
}

Again you should refer to your old demos as you’ve done similar numerous times :slight_smile:

When you use a key frame the property is animated during the whole key frame duration.

However if the property you are animating only has 2 states (like pointer-events or visibility) then there is no gradual change. It just switches on and off straight away.

That’s why you need to keep the same state all the way through and then just make the change at 99%. That means that from 0 - 99% you would use pointer-events:none and then at 100% use pointer-events:initial.
That means the change occurs between 99 and 100% only and not immediately at 0%.

2 Likes

You also have your logic back to front.

The element needs to be pointer-events:initial to start with and then none when the animation is finished.

.fadeBackground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  animation: fadeOut 2s ease-in 700ms forwards;
  animation-delay: 1s;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  99.9%{
     pointer-events: initial;
  }
  100% {
    opacity: 0;
    pointer-events: none;
  }
}
2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.