어떻게 아래 그림과 같이 테이블을 애니메이션 할 필요가 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% 
    } 
} 

또한 나는 position: absolute;에 .table 세트 after을 추가하려고 width, height, background-color으로 이동하고 애니메이션을 사용하여 왼쪽에서 오른쪽으로 이동하십시오. 그러나이 방법으로 사용할 수 없도록 height 속성을 하드 코드 할 수 없습니다. 더 나은 방법을 조언 해 주시겠습니까?

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>