Javascript Animation Fade Out Before Video End

I am attempting to play a video then have the div fade out to 0 opacity at sixty seconds before completion. The issue I'm having is that in removing of the animation on the div whi

Solution 1:

Your time detection code is correct, but the way you're handling the animation is wrong. Here I show what sync() and its CSS animation should look like:

functionsync () {
  var video = document.querySelector('.video');
  video.classList.add('anim-fade-out');
}
setTimeout(sync, 2000);

.video {
  width: 160px;
  height: 90px;
  background: black;
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}
.anim-fade-out {
  animation: fade-out 1s forwards;
}

<divclass="video"></div>

Add the animation only when you want to start the fade out, there's no need to mess with running/paused. Once you add the class, the forward keyword will keep the last state of the animation when it's done animating, which in this case is opacity: 0