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 動畫 }
怎樣用JS把CSS動畫封裝起來
Helenr
2018-12-20 23:15:56