Background-image animation

Question

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.

I'm aware there's no direct CSS methods for animating background images, however I have tried to take this into account.

Please see the JSFiddle link below for my code:

http://jsfiddle.net/JTp6x/

#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;
}

Is the animation method and key frames for the animation

Answer 1

Actually, it is possible to animate a background image in CSS without moving the content, provided certain conditions are met.

The link to your image is a relative link, and your code has some stuff which gets in the way, so I created a new fiddle from scratch that uses an image on wikimedia commons, which should show you how a bounce-like effect could be achieved. Based on what you said you're trying to do, I put it in an <li> element, and roughly reused your @keyframes.

The fiddle is here: http://jsfiddle.net/raphaelvalerio/SbAkP/

<ul>
    <li id="bouncy-background">stuff that absolutely should not move at all in any way. Ever.</li>
    <li>another item</li>
    <li>another item</li>
</ul>

The CSS (with vendor-prefixes removed for brevity. See the fiddle for the full version):

#bouncy-background {
width: 100%;
height: 400px;
background-color: goldenrod;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/7/71/William_Shatner.jpg');
background-repeat: no-repeat;
background-size: auto 200px;
background-position: center bottom;
animation-name: bounce;
animation-duration: 2s;
animation-fill-mode: both;
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% {background-position: center bottom;} 
40% {background-position: center top;}
60% {background-position: center 75%;}
}

The important thing here is what you're animating. You can animate most elements that have calculated values, like percentages, pixels, etc. In this case, I'm animating not the background itself, but the background-position rule, since it's a calculated value.

Check out the fiddle and play around with it and see if you can alter my recipe into something that fits what you have in mind.

Also note that at present the animation simply kicks off on load, but you could wire it to a pseudo-selector event like :hover.