我如何重複CSS3動畫，但每次都改變它

我試圖創建一個CSS3動畫，其中有幾個TD在動畫延遲功能中稍有改動就重複。我想要幾個條紋，一個接一個地出現，延遲時間越來越長。我如何重複CSS3動畫，但每次都改變它

是否有一種在TD的每次迭代中重複現有代碼而不必爲每行創建新CSS類的簡寫方法？

/* Code */ 
<style> 
td[class="animation"]{ 
     display: block; 
     width: 100px; 
     height: 5px; 
     background-color: #ffffff; 
     -webkit-animation-name: example; /* Chrome, Safari, Opera */ 
     -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ 
     animation-name: example; 
     animation-duration: 8s; 
     animation-iteration-count: infinite; 
     animation-direction: alternate; 
     } 
     /* Chrome, Safari, Opera */ 
     @-webkit-keyframes example { 
      0% {background-color: #9A1321;} 
      40% {background-color: white;} 
      60% {background-color: white;} 
      100% {background-color: #232F80;} 
     } 

     /* Standard syntax */ 
     @keyframes example { 
      0% {background-color: #9A1321;} 
      40% {background-color: white;} 
      60% {background-color: white;} 
      100% {background-color: #232F80;} 
</style> 

<body> 
<table><tr><td class="animation" /></tr></table> 
</body>

非常感謝您的幫助！

最佳，

詹姆斯

來源

2016-03-01 Jamie Carmichael

一個解決方案可以是你的CSS類+ JavaScript代碼的組合。

只需十個分量的TD的沒有你的類，然後用的setTimeout（JavaScript的），你可以調用改變從TD的

來源

2016-03-01 12:51:25 Ackman303

只要告訴我，如果你需要一些示例代碼的類的函數;） – Ackman303

謝謝您回覆！不幸的是，我正在爲HTML電子郵件編寫動畫（一些特定的客戶端將處理CSS3），所以我僅限於CSS。任何建議只使用CSS？ –

我只能說的是，你研究的財產「過渡」，增加一些「緩解」 – Ackman303

我如何重複CSS3動畫，但每次都改變它

回答

相關問題