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 {
  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;
}

Sigismondo

check #23459140 – Girasol

Can you state what's going wrong? Many people might be unwilling to click on the link, which presumably shows the problem, because it could go anywhere. – Freesia

I'm trying make the shine effect work automatically every X seconds, but now this effect only work with :hover. @GrahamAsher – Sigismondo

Use animation instead of transition. – Coinsure

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;
  }
}

Hitchhike

@Sigismondo are you sure, i just got it that you want it to run every 5 sec but this is not it. I will figure it out soon. – Hitchhike

Do you know how can i disable that transition? – Hitchhike

Yes. I'm sure this help me. – Sigismondo

Ok i think i got it. This one shine like you wanted every 5 sec jsfiddle.net/nqQc7/512 – Hitchhike

True. It is even better, actually. – Sigismondo

Is it possible to do this over an entire table row? – Chaunce

Very cool. Thanks! In case it helps other people: I applied the shine animation to a form and, because of other styling rules, the "shine" layer (the ":after") stayed on top of the form for a while. It was not a problem style-wise, but it prevented users from selecting the form inputs. To solve it, I just added this rule to the :after selector: "pointer-events: none;" – Humphries