title: Background-image animation
body: <p>I'm trying to animate a nav bar button, i'd like the image in the background of the li tag to bounce up and down, while the text (image) remains still.</p>
  
  <p>I'm aware there's no direct CSS methods for animating background images, however I have tried to take this into account.</p>
  
  <p>Please see the JSFiddle link below for my code:</p>
  
  <p><a href="http://jsfiddle.net/JTp6x/" rel="nofollow">http://jsfiddle.net/JTp6x/</a></p>
  
  <pre><code>#Home
  { 
      position: absolute;
      width:125px;
      height:100px;
      background: transparent url('Images/Icons/HomeIcon.png') no-repeat top center;
  -webkit-animation-fill-mode:both;
  -moz-animation-fill-mode:both;
  -ms-animation-fill-mode:both;
  -o-animation-fill-mode:both;
  animation-fill-mode:both;
  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  -ms-animation-duration:1s;
  -o-animation-duration:1s;
  animation-duration:1s;}
  .animated.hinge
  {
  -webkit-animation-duration:2s;
  -moz-animation-duration:2s;
  -ms-animation-duration:2s;
  -o-animation-duration:2s;
  animation-duration:2s;
  }
  
  @-webkit-keyframes bounce {
      0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
          40% {-webkit-transform: translateY(-30px);}
      60% {-webkit-transform: translateY(-15px);}
  }
  
  @-moz-keyframes bounce {
      0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
      40% {-moz-transform: translateY(-30px);}
      60% {-moz-transform: translateY(-15px);}
  }
  
  @-o-keyframes bounce {
      0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
      40% {-o-transform: translateY(-30px);}
      60% {-o-transform: translateY(-15px);}
  }
  @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
      40% {transform: translateY(-30px);}
      60% {transform: translateY(-15px);}
  }
  
  #Home:hover {
      -webkit-animation-name: bounce;
      -moz-animation-name: bounce;
      -o-animation-name: bounce;
      animation-name: bounce;
  }
  </code></pre>
  
  <p>Is the animation method and key frames for the animation</p>