Q:

Move background image up and down

I've got a div with background image. How to do this: when you hover on that div, the background image moves 5px up and then 5 pixel down? For example fast up, and slow down.
My code:
CSS
<style>
.place {
background:url(../img/place.png) no-repeat 6px 50%;
}
</style>

HTML   
 <div class="place">
    123 Something Street<br/>
    UB5 212 Liverpool
    </div>

How to do this with transition? Or jquery?

A:

Using CSS3
.place {
    background:url(http://lorempixel.com/20/20/) no-repeat;
}

div.place:hover {
    animation:myanim 0.5s;
    -webkit-animation:myanim 0.5s;
    /* Safari and Chrome */
}

@keyframes myanim {
    0% {
        background-position:0 0;
    }
    50% {
        background-position:20px 0;
    }
    100% {
        background-position:0 0;
    }
}

@-webkit-keyframes myanim
/* Safari and Chrome */
 {
    0% {
        background-position:0 0;
    }
    50% {
        background-position:20px 0;
    }
    100% {
        background-position:0 0;
    }
}

