CSS Image Shine

Question

Мне нужно это изображение, чтобы светить туда и обратно несколько раз, а не при наведении курсора мыши, но все время:

https://jsfiddle.net/aeauur87/1/

.button { 
    background:url(http://onestudio.id-staging.com/_BUILD/Dominos/BANNERS/C3%20Legend%20Banners/Double%20MPU/button.png); 
    width:148px; 
    height:166px; 
    position:absolute; 
    top:1px; 
    left:1px; 

} 

Благодаря

Answer 1

Вы можете использовать псевдо-элемент для этого, в сочетании с ключевым кадром анимации:

.button { 
 
    background: url(http://onestudio.id-staging.com/_BUILD/Dominos/BANNERS/C3%20Legend%20Banners/Double%20MPU/button.png); 
 
    width: 148px; 
 
    height: 166px; 
 
    position: absolute; 
 
    top: 1px; 
 
    left: 1px; 
 
    overflow: hidden; 
 
} 
 
.button:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 150%; 
 
    height: 150%; 
 
    width: 100px; 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%); 
 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0))); 
 
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%); 
 
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%); 
 
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%); 
 
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#00ffffff', GradientType=1); 
 
    -webkit-animation: 2s myani linear infinite; 
 
    animation: 2s myani linear infinite; 
 
} 
 
@-webkit-keyframes myani { 
 
    0% { 
 
    top: 100%; 
 
    left: 150%; 
 
    } 
 
    100% { 
 
    top: -150%; 
 
    left: -150%; 
 
    } 
 
} 
 
@keyframes myani { 
 
    0% { 
 
    top: 100%; 
 
    left: 150%; 
 
    } 
 
    100% { 
 
    top: -150%; 
 
    left: -150%; 
 
    } 
 
}

<div class="button"></div>

Примечание

Это будет работать бесконечно, но может быть изменен путем изменения значения счетчика цикла анимационной