Animated sprite menu

Animated sprite menu.markdown

Animated sprite menu

Mostly css but requires js if you are picky like me. Feel free to remove the js.

A Pen by Adam Wicks on CodePen.

License.

index.html

<h1>Animated sprite menu</h1>
<nav>
  <a class="no-animation-on-load" href="#"></a>
  <a class="no-animation-on-load" href="#"></a>
  <a class="no-animation-on-load" href="#"></a>
</nav>

script.js

$("nav a").on('mouseleave', function(){
  if($(this).hasClass("no-animation-on-load")){
    $(this).removeClass("no-animation-on-load");
  }
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

nav a {
    display: inline-block;
    width: 50px;
    height: 72px;
    background-image: url("http://s.cdpn.io/79/sprite-steps.png");
    animation: calm .6s steps(5) 0s 1 normal forwards running;
}

nav a:hover {
  animation: defend .6s steps(5) 0s 1 normal forwards running;
}

@keyframes defend {
   from { background-position: 0px; }
     to { background-position: -250px; }
}
@keyframes calm {
   from { background-position: -250px; }
     to { background-position: 0px; }
}

.no-animation-on-load {
  animation: none;
}