CSS3 animation動畫,循環間的延時執行該怎么弄


    在使用css做一些小的動畫時,有些動畫我們是需要其循環播放的,而且在部分動畫中我們需要上一個循環與下一個循環之間存在一定的時間間隔,這個時候的animation-delay和transition-delay 只會在第一次動畫開始的時候生效,而在兩個循環之間是不生效的,這時我們就需要用其他的方法來實現循環之間的時間間隔。

   方法:如下面的程序,我們可以把動畫執行的總時間設置為4s,然后設置動畫從75%開始,用后面的1s來做動畫,前面的3s用作每次動畫開始之前的延時,這樣就可以解決循環播放delay失效的問題。

 

div{

      animation: move 4s ease infinite;

}

@keyframes move{

       /*  此處從75%開始 */

      75%{ transform: translateX(0px);}

      100%{ transform: translateX(100px);}

}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM