css-shine-animation

shine.css

.shing {
  position: relative;
}

.shing::after {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  content: '';

  box-shadow: inset 0 2px #FFF;
  background: -50px center no-repeat;
  background-image: linear-gradient(125deg,rgba(255,255,255,0) 30%,#FFF 30%,#FFF 50%,rgba(255,255,255,0) 50%);
  background-clip: padding-box;
  opacity: .3;
  transition: background-position 0.4s;
}

.shing:hover:after {
  background-position: 100px center;
}