在CSS動畫中添加延遲到循環

我一直試圖（how make a looped animation wait using css3和CSS Animation Delay in Between Loop）在我的css動畫重新啓動之前有一些延遲，但尚未得到任何結果。在CSS動畫中添加延遲到循環

我是新來的CSS，希望你可以給我一些建議。

下面是一些CSS代碼（我的網站，你可以去http://iwaterhealth.com/）

i { 
    font-style: normal; 
    padding: 0 0.25em; 
    -webkit-transform: scale(0) translate3d(0, -2000px, 0); 
     -moz-transform: scale(0) translate3d(0, -2000px, 0); 
     -ms-transform: scale(0) translate3d(0, -2000px, 0); 
     -o-transform: scale(0) translate3d(0, -2000px, 0); 
      transform: scale(0) translate3d(0, -2000px, 0); 
    background: rgba(255, 255, 255, 0.3); 
    border-radius: 50%; 
} 
i.fly-in-out { 
    -webkit-animation: fly-in-out 3s infinite ease-in-out 4s; 
     -moz-animation: fly-in-out 3s infinite ease-in-out 4s; 
     -o-animation: fly-in-out 3s infinite ease-in-out 4s; 
      animation: fly-in-out 3s infinite ease-in-out 4s; 
} 


@keyframes fly-in-out { 
    0% { 
     transform: scale(0) translate3d(0, -2000px, 0); 
     background: rgba(255, 255, 255, 0.3); 
     box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2); 
     border-radius: 50%; 
    } 
    15%, 85% { 
     color: rgba(255, 255, 255, 0.8); 
     text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); 
     transform: scale(1) translate3d(0, 0, 0); 
     background: transparent; 
     box-shadow: none; 
    } 
    100% { 
     color: transparent; 
     transform: scale(0) translate3d(0, 2000px, 0); 
     background: rgba(255, 255, 255, 0.3); 
     box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2); 
     border-radius: 50%; 
    } 
}

來源

2016-09-19 user1984132

你在哪裏指定'動畫delay' ？我猜這是基本的。 –

「4s」是延遲。我看到使用這種速記動畫屬性的人。那是不正確的？ – user1984132

我不喜歡使用這種簡寫來延遲，因爲有兩個相似的值（我不知道瀏覽器如何區分同一句中的3s和4s）。我更喜歡沒有延遲的簡寫，然後添加帶有前綴的「animation-delay」。 –

嘗試，因爲這句法動畫

i { 
     font-style: normal; 
     padding: 0 0.25em; 
     -webkit-transform: scale(0) translate3d(0, -2000px, 0); 
      -moz-transform: scale(0) translate3d(0, -2000px, 0); 
      -ms-transform: scale(0) translate3d(0, -2000px, 0); 
      -o-transform: scale(0) translate3d(0, -2000px, 0); 
       transform: scale(0) translate3d(0, -2000px, 0); 
     background: rgba(255, 255, 255, 0.3); 
     border-radius: 50%; 
    } 
    i.fly-in-out { 
     -webkit-animation: fly-in-out 3s ease-in-out 8s infinite; 
      -moz-animation: fly-in-out 3s ease-in-out 8s infinite; 
      -o-animation: fly-in-out 3s ease-in-out 8s infinite; 
       animation: fly-in-out 3s ease-in-out 8s infinite; 
    } 


    @keyframes fly-in-out { 
     0% { 
      transform: scale(0) translate3d(0, -2000px, 0); 
      background: rgba(255, 255, 255, 0.3); 
      box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2); 
      border-radius: 50%; 
     } 
     15%, 85% { 
      color: rgba(255, 255, 255, 0.8); 
      text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); 
      transform: scale(1) translate3d(0, 0, 0); 
      background: transparent; 
      box-shadow: none; 
     } 
     100% { 
      color: transparent; 
      transform: scale(0) translate3d(0, 2000px, 0); 
      background: rgba(255, 255, 255, 0.3); 
      box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2); 
      border-radius: 50%; 
     } 
    }

來源

2016-09-19 15:39:58

我修改建議。但是，它在每次迭代效果後仍然不會暫停。（你可以訪問iwaterhealth.com來看看效果，我想實現的是讓文本動畫暫停一段時間後再開始出現） – user1984132

我試着用「動畫：飛 - 進出8s無限緩出;「效果非常像我想要的。 – user1984132

在CSS動畫中添加延遲到循環

回答

相關問題