在使用css做一些小的動畫時,有些動畫中我們需要上一個循環與下一個循環之間存在一定的時間間隔,這個時候的animation-delay和transition-delay 只會在第一次動畫開始的時候生效,而在兩個循環動畫之間是不生效的,這時我們就需要用其他的方法來實現循環之間的時間間隔。
給動畫的總時間設置一個時間,比如4秒,然后設置動畫從75%開始,前面的3秒用作每次動畫開始之前的延時,后面的1秒來做動畫,
例如:
@keyframes move{
/* 此處從75%開始 */
75%{ transform: translateX(0px);}
100%{ transform: translateX(100px);}
}
