.shine {
  //animation: shinning 2.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
  position: relative;
  overflow: hidden;

  @for $i from 1 through 18 {
    &:nth-child(#{$i}) {
      &:after{
        animation-delay:                                  #{0.1+($i)/14}s;
      }
    }
  }
}

@keyframes shinning {
  0% {
    transform: translate(-100%,0);
  }
  100% {
    transform: translate(50%,0);
  }
}


.shine:after {
  content: '';
  background:                                               radial-gradient(circle farthest-side at 0 0, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 65%) no-repeat;
  position:                                                 absolute;
  top:                                                      0px;
  height:                                                   100%;
  width:                                                    100%;
  animation:                                                shinning 2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
  z-index:                                                  1010;
}
