在使用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);}
}
