どのように私は下の画像のようにテーブルをアニメーション化する必要があるCSS3

Question

を用いた白色勾配でテーブルの背景をアニメーション化します道

.table-body { 
    background: linear-gradient(90deg, #E8E8E8, #ffffff, #E8E8E8); 
    background-size: 200% 200%; 
    animation: Animation 3s ease infinite; 
} 

@-webkit-keyframes Animation { 
    0%{ 
    background-position-x: 0% 
    } 
    100%{ 
    background-position-x: 100% 
    } 
} 

はまた、私はそれにafter.tableのセットを追加しようとしましたposition: absolute;width,height,background-colorとし、アニメーションを使用して左から右に移動します。 しかし、私はこのように使用することはできませんので、高さのプロパティをハードコードすることはできません。 私にアドバイスしてもらえますか？

Answer 1

私は以下のことに恵まれました。 tdの追加、最後のキーフレームのバックグラウンド位置の変更、およびキーフレームの順序の切り替えに注意してください。

<table> 
    <thead></thead> 
    <tbody class='table-body'> 
     <tr><td>Text goes here</td></tr> 
     <tr><td>Text goes here</td></tr> 
     <tr><td>Text goes here</td></tr> 
     <tr><td>Text goes here</td></tr> 
    </tbody> 
</table> 

<style> 
.table-body { 
    background: linear-gradient(90deg, #E8E8E8, #ffffff, #E8E8E8); 
    background-size: 200% 200%; 
    animation: Animation 3s linear infinite; 
} 

@-webkit-keyframes Animation { 
    0%{ 
    background-position-x: 200% 
    } 
    100%{ 
    background-position-x: 0% 
    } 
} 
</style>