CSS Animate Icon on Hover

index.html

<h3>The Animated Icon on Hover</h3>
<p>My animating skills suck, but it works!</p>
<a href="#" class="category">
  <span class="icon"></span>
  Category Link
</a>

<h3>The Image Sprite</h3>
<p>Each "frame" is 60px by 60px to fit nicely in the icon span.</p>
<div class="red">
  <img src="http://jjlink.me/images/float.png" />
</div>

style.scss

@import "compass";
@-webkit-keyframes float {
    from { background-position: 0px; }
    to { background-position: -600px; }
}

@-moz-keyframes float {
    from { background-position: 0px; }
    to { background-position: -600px; }
}

@-o-keyframes float {
    from { background-position: 0px; }
    to { background-position: -600px; }
}

@keyframes float {
    from { background-position: 0px; }
    to { background-position: -600px; }
}

body { 
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
}
h3 { clear: both; padding: 20px 0 5px; }
.red { background: red; float: left; }

.category {
  background-color: #4580B2;
  color: #fff;
  display: inline-block;
  float: left;
  font-size: 18px;
  font-weight: bold;
  line-height: 60px;
  padding: 10px 20px 10px 15px;
  text-decoration: none;
  text-transform: uppercase;
  
  &:hover {
    background-color: #295f8d;
    .icon { 
      -webkit-animation: float .8s steps(10, end) 1;
      -moz-animation: float .8s steps(10, end) 1;
      -o-animation: float .8s steps(10, end) 1;
      animation: float .8s steps(10, end) 1;
    }
  }
}
.icon {
  background-color: #f84996;
  background-image: url('http://jjlink.me/images/float.png');
  display: inline-block;
  float: left;
  height: 60px;
  margin-right: 15px;
  width: 60px;
  @include border-radius(50%);
  @include hide-text();
}