Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Shine effect automatically with css

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;
}
like image 902
Anderson Avatar asked Dec 04 '15 18:12

Anderson


People also ask

How do you make a glow effect in CSS?

How To Create a CSS Glow Effect. The CSS glowing text can be created by using the text-shadow property. This property allows you to add different shadows to your text. You can also place your text in an element and then apply the shadow effect to it by using the box-shadow property with some animations.

How do I make an image glow in HTML?

The key is to use the box-shadow property of CSS to glow the image when user put cursor on image.


1 Answers

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;
  }
}
like image 97
Nenad Vracar Avatar answered Oct 02 '22 13:10

Nenad Vracar