私はこのフィドル、次の表の行に輝き効果を追加しようとしている

Question

：http://jsfiddle.net/nqQc7/511/

.gold:after { 
    animation: shine 1.5s infinite linear alternate; 
    content: ""; 
    position: absolute; 
    top: -110%; 
    left: -210%; 
    width: 200%; 
    height: 200%; 
    opacity: 0; 
    transform: rotate(30deg); 

    background: rgba(255, 255, 255, 0.13); 
    background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0.13) 0%, 
    rgba(255, 255, 255, 0.13) 77%, 
    rgba(255, 255, 255, 0.5) 92%, 
    rgba(255, 255, 255, 0.0) 100% 
); 
} 

.gold:active:after { 
    opacity: 0; 
} 

@keyframes shine{ 
    to { 
    opacity: 1; 
    top: -30%; 
    left: -30%; 
    transition-property: left, top, opacity; 
    transition-duration: 0.7s, 0.7s, 0.15s; 
    transition-timing-function: ease; 
    } 
} 

しかし、私は右のそれを得ることができないよう、効果があふれています表：https://jsfiddle.net/uokvjaxx/2/

は、私はちょうど1つのテーブルの行にクラスを追加し、効果がテーブル全体を通過：

<table style="width:100%"> 
    <tr> 
    <th>Firstname</th> 
    <th>Lastname</th> 
    <th>Age</th> 
    </tr> 
    <tr class="gold"> 
    <td>Jill</td> 
    <td>Smith</td> 
    <td>50</td> 
    </tr> 
    <tr> 
    <td>Eve</td> 
    <td>Jackson</td> 
    <td>94</td> 
    </tr> 
</table> 

効果を制限する方法はありちょうどテーブルROへw行の表示方法に影響を与えずに？

Answer 1

多分このようなものは、あなたが望む場所に近づくでしょう。異なるブラウザをサポートする必要がある場合は、必要に応じてカスタマイズし、ベンダープレフィックスを忘れないでください。

.gold { 
 
\t background: linear-gradient(-45deg, #fff087, #eccf02, #fff087); 
 
\t background-size: 50% 100%; 
 
\t animation: linear-gradient 10s linear infinite; 
 
} 
 

 
@keyframes linear-gradient { 
 
\t 0% { 
 
\t \t background-position: 0% 50% 
 
\t } 
 

 
\t 100% { 
 
\t \t background-position: 400% 400% 
 
\t } 
 
}

<table style="width:100%"> 
 
\t <tr> 
 
\t \t <th>Firstname</th> 
 
\t \t <th>Lastname</th> 
 
\t \t <th>Age</th> 
 
\t </tr> 
 
\t <tr class="gold"> 
 
\t \t <td>Jill</td> 
 
\t \t <td>Smith</td> 
 
\t \t <td>50</td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td>Eve</td> 
 
\t \t <td>Jackson</td> 
 
\t \t <td>94</td> 
 
\t </tr> 
 
</table>