css - Javascript animation fade out before video end -

i attempting play video have div fade out 0 opacity @ sixty seconds before completion. issue i'm having in removing of animation on div allows video fade in @ beginning in effect switches off div, (the video). want achieve fadeout @ 60 seconds. hope achieve remove id animation without affecting video playback, add timecode fade out video / (div) 60 seconds before end. may not have not explained see jsfiddle.

var callonce = true;  function aperture(){         if ((media.duration - media.currenttime) < 60)         if (callonce) {           sync();           callonce = false;         } }  function sync(){         "use strict";         var media = document.getelementbyid("media");         media.classlist.add("timecode");         media.classlist.remove("animation"); } setinterval(aperture, 100); 

jsfiddle: https://jsfiddle.net/oytqq0jb/

your time detection code correct, way you're handling animation wrong. here show sync() , css animation should like:

function sync () {    var video = document.queryselector('.video');    video.classlist.add('anim-fade-out');  }  settimeout(sync, 2000);

.video {    width: 160px;    height: 90px;    background: black;  }    @keyframes fade-out {    {      opacity: 0;    }  }  .anim-fade-out {    animation: fade-out 1s forwards;  }

<div class="video"></div>

add animation when want start fade out, there's no need mess running/paused. once add class, forward keyword keep last state of animation when it's done animating, in case opacity: 0