Using 1 player, exit link should fade in after play clicked, not before

[asasass]

I forgot how to do this.

I think I would be staying with keyframes, unless I should be using the other one?

This one uses 1 video player,
and it’s not using a whole lot of that other stuff that is in the multi player code.
https://jsfiddle.net/61va4r8b/1/

  animation: fadeInExit 4s forwards;
  opacity: 0;
  pointer-events: none;
  clip-path: circle(50%);
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

That is done here using multiple players.
Works here.
https://jsfiddle.net/6f3qxr97/

  animation: fadeIn 8s forwards 8s;
  visibility: hidden;
  opacity: 0;
}

@keyframes fadeIn {
  to {
   visibility: visible;
    opacity: 1;
  }
}

But it’s not using 1 player.

[PaulOB]

If you don’t want the animation to run until you have clicked play then why have you made it run straight away?

You need to tie the animation to the class that is added when play is clicked.

i.e. Remove the animation name from the exit rule and make it only work when the class of slide has been added dynamically (you are adding the slide class when play is clicked).

.exit {
  position: absolute;
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47px;
  height: 47px;
  cursor: pointer;
  border-radius: 100%;
  background: transparent;
  border: 5px solid red;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  clip-path: circle(50%);
}
.slide .exit{
    animation: fadeInExit 4s forwards;
}

[asasass]

I did that here.

https://jsfiddle.net/jh6xrctv/

.exit {
  position: absolute;
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47px;
  height: 47px;
  cursor: pointer;
  border-radius: 100%;
  background: transparent;
  border: 5px solid red;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  clip-path: circle(50%);
}
.slide .exit{
    animation: fadeInExit 4s forwards 7.5s;
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

[PaulOB]

@asasass

I did that here.

Isn’t that what you wanted ?

[asasass]

Yes.