Dots & Thoughts

This code will animate the .bouncing element. It is done by only using CSS3 properties, i.e. without any JavaScript of course.

@-webkit-keyframes bounce {
    from { -webkit-transform: translate(0,0) }
    to { -webkit-transform: translate(-10px,0) }
}

.bouncing {
    -webkit-animation: bounce .5s ease infinite alternate;
}

Explanation

• The transformation moves it to the left (translation) by 10 pixels.
• The animation doesn't stop (infinite) and goes forward-reverse (alternate).
• One iteration occurs in 0.5 second.

Further

This is going to work only with WebKit rendering engines. Don't forget the other vendor suffixes and the suffix-free property for better and future compatibility. Used this way, the bounce animation won't stop. You may consider to trigger it thanks to the :hover pseudo-class or to add the .bouncing class via JS. You can use percentages like 0% and 100% instead of from and to.