Эффект блеска автоматически с помощью css

Я пытаюсь сделать этот эффект сияния, действуя автоматически (без: зависания) каждые 5 секунд.Эффект блеска автоматически с помощью css

http://jsfiddle.net/AntonTrollback/nqQc7/

.icon:after { 
    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% 
); 
} 

.icon:hover:after { 
    opacity: 1; 
    top: -30%; 
    left: -30%; 
    transition-property: left, top, opacity; 
    transition-duration: 0.7s, 0.7s, 0.15s; 
    transition-timing-function: ease; 
}

источник

2015-12-04 Anderson

http://stackoverflow.com/questions/23458640/how-to-have-css3-animation -to-loop-forever –

Можете ли вы сказать, что происходит не так? Многие люди могут не захотеть щелкнуть ссылку, которая, по-видимому, показывает проблему, потому что она может идти куда угодно. –

Я пытаюсь заставить эффект блеска работать автоматически каждые X секунд, но теперь этот эффект работает только с: hover. @GrahamAsher – Anderson

Вы можете создать CSS анимации, как этот чек DEMO

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

источник

2015-12-04 18:10:44

Или что-то вроде этого http://jsfiddle.net/nqQc7/511/ –

Работал нормально. ТКС! – Anderson

@ Андерсон, вы уверены, я просто получил его, чтобы вы его запускали каждые 5 секунд, но это не так. Я скоро это выясню. –

Эффект блеска автоматически с помощью css

ответ

Смежные вопросы