CSS3 animation動畫，迴圈間的延時執行該怎麼弄

標籤：

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

   方法：如下面的程式，我們可以把動畫執行的總時間設定為4s，然後從75%開始，用後面的1s來做動畫，前面的3s用作每次動畫開始之前的延時，這樣就可以解決迴圈播放delay失效的問題。

 

div{

      animation: move 4s ease infinite;

}

@keyframes move{

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

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

}

 

CSS3 animation動畫，迴圈間的延時執行該怎麼弄