怎样用JS把CSS动画封装起来
发布网友
发布时间：2022-04-23 01:10
共2个回答
热心网友
时间：2022-04-06 14:31
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 动画
}
热心网友
时间：2022-04-06 15:49
？？？？
var styleTag = document.createElement('style');var a = "CSS动画";/* var a = "@keyframe hide{display:none}";
var b = "...";
...
styleTag.innerHTML = a;
document.body.appendChild(styleTag);
应该是这个意思吧，，不过我觉得没有什么必要馁
