Javascript动画在视频结束前淡出

我试图播放一段视频，然后在完成前60秒将div淡出到0不透明度。我遇到的问题是，在删除div上的动画时，允许视频在开始时淡入，实际上会关闭div（视频）。我想要达到的是在60秒时淡出。我希望实现的是在不影响视频播放的情况下删除id动画，然后添加时间码，该时间码将在结束前60秒淡出视频/（div）。我可能没有很好地解释这一点，请参阅JSFIDLE

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);

var callOnce=true；
函数孔径（）{
如果（（媒体持续时间-媒体当前时间）<60）
if（callOnce）{
sync（）；
callOnce=false；
}
}
函数sync（）{
“严格使用”；
var media=document.getElementById（“媒体”）；
media.classList.add（“时间码”）；
media.classList.remove（“动画”）；
}
设置间隔（孔径，100）；

---

jsFIDLE:

您的时间检测代码是正确的，但是您处理动画的方式是错误的。这里我展示了

sync（）

及其CSS动画应该是什么样子：

函数同步（）{
var video=document.querySelector（'.video'）；
video.classList.add（'anim-fade-out'）；
}
设置超时（同步，2000）
。视频{
宽度：160px；
高度：90px；
背景：黑色；
}
@关键帧淡出{
到{
不透明度：0；
}
}
.动画淡出{
动画：淡出1s向前；
}
您的时间检测代码是正确的，但处理动画的方式是错误的。这里我展示了
sync（）
及其CSS动画应该是什么样子：


函数同步（）{
var video=document.querySelector（'.video'）；
video.classList.add（'anim-fade-out'）；
}
设置超时（同步，2000）
。视频{
宽度：160px；
高度：90px；
背景：黑色；
}
@关键帧淡出{
到{
不透明度：0；
}
}
.动画淡出{
动画：淡出1s向前；
}
我建议使用
clearInterval（）
停止计时器，而
aperture
将不再运行。我建议使用
clearInterval（）
停止计时器，而
aperture
将不再运行。