Shine bright like a diamond

https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css

by Andy Challis

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<i class='fa fa-diamond fa-4x shine'></i>

CSS

@-webkit-keyframes shine {
  50% {
    background-position: top right;
  }
  100% {
    background-position: bottom left;
  }
}

.shine {
  background: #222 -webkit-gradient(linear, left top, right top, from(#33CEFD), to(#33CEFD), color-stop(0.5, #fff)) 0 0 no-repeat;
  -webkit-background-size: 100px;
  color: rgba(255, 255, 255, 0.3);
  -webkit-background-clip: text;
}

.shine:hover {
  background: #222 -webkit-gradient(linear, left top, right top, from(#33CEFD), to(#33CEFD), color-stop(0.5, #fff)) 0 0 no-repeat;
  -webkit-background-size: 100px;
  color: rgba(255, 255, 255, 0.3);
  -webkit-background-clip: text;
  -webkit-animation: shine 3s infinite;
  animation: shine 3s infinite;
}