animation如何設置每次直接間隔0.5s?


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

給動畫的總時間設置一個時間,比如4秒,然后設置動畫從75%開始,前面的3秒用作每次動畫開始之前的延時,后面的1秒來做動畫,

例如:

@keyframes move{

       /*  此處從75%開始 */

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

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

}


免責聲明!

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



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