Shine effect automatically with css

Question

I\'m trying to do this shine effect operate automatically (without a: hover), every 5 seconds.

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

.icon:after {
          


        

Answer 1

You can create CSS animation like this 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;
  }
}