Как оживить фон таблицы с белым градиентом, используя CSS3

Question

Мне нужно анимировать стол, как на картинке ниже:

Структура

<table> 
    <thead></thead> 
    <tbody class='table-body'> 
     <tr></tr> <!-- It can be any number of rows --> 
     <tr></tr> 
     <tr></tr> 
     <tr></tr> 
    </tbody> 
</table> 

Я пытался сделать это в этом способ

.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>