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 动画
}在JavaScript中，我们可以使用CSS的transition属性来实现动画效果。以下是一个简单的例子：
```javascript // 获取元素 var element = document.getElementById('myElement');
// 设置过渡属性 element.style.transition = 'transform 2s';
// 调整元素的属性 element.style.transform = 'translateX(10px)'; ```
在这个例子中，我们首先获取了id为myElement的元素，然后设置了transition属性为transform 2s，这意味着元素的transform属性将在2秒内改变。
然后，我们改变了元素的transform属性，使其向右移动10像素。
这只是一个基本的例子，你可以根据你的需要来设置动画的参数，比如开始和结束的时间，动画的速度等。
另外，如果你的动画是通过CSS文件来实现的，你可以使用JavaScript来读取这个文件，并使用setInterval函数来定期执行你的动画。例如：
```javascript // 获取元素 var element = document.getElementById('myElement');
// 读取CSS文件 var css = document.querySelector('style');
// 设置过渡属性 css.style.transition = 'transform 2s';
// 调整元素的属性 element.style.transform = 'translateX(10px)'; ```
在这个例子中，我们首先读取了style元素，然后设置了transition属性为transform 2s。然后，我们改变了元素的transform属性，使其向右移动10像素。
注意，setInterval函数会定期执行你的动画，但不会在动画结束后立即停止。如果你想在动画结束后停止动画，你可以在setInterval函数中添加一个clearInterval函数。
