怎样用JS把CSS动画封装起来

Question

1.进入网站有一个视频，希望视频播放完之后触发CSS3动画，但是视频受网络影响，实际播放完成的时间不好控制。

2.所以css的延迟时间不好控制，如果视频卡了一下，时间就错过了

3.怎样能在视频完成的时候触发animation呢？

4.下面是动画，div从左到右运动

#banner-cloud-1{

    position: absolute;

    top: 0px;

    left: 0;

    -webkit-animation:cloud-move-1 5s linear;

    -o-animation:cloud-move-1 5s linear;

    animation:cloud-move-1 5s  linear;

    -webkit-animation-delay: 6s;

    -o-animation-delay: 6s;

    animation-delay: 6s;

    -webkit-animation-fill-mode: both;

    -o-animation-fill-mode: both;

    animation-fill-mode: both;

}

@keyframes cloud-move-1{

    from{

        left: 0;

    }

    to{

        left:-3760px;

    }

}

5.下面是视频结束时触发的函数

videos.onended = function(){

            //触发事件一

            //触发事件二

            //触发事件三

            //........

            //触发上面的 animation 动画

            

        }