# Slide and Bounce an Image on Hover | Snippets | kirupa.com

**URL:** <https://forum.kirupa.com/t/slide-and-bounce-an-image-on-hover-snippets-kirupa-com/352270>\
**Category:** programming\
**Created:** [November 23, 2014, 3:29am UTC](https://forum.kirupa.com/t/slide-and-bounce-an-image-on-hover-snippets-kirupa-com/352270 "2014-11-23T03:29:20Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 23, 2014, 3:29am UTC](https://forum.kirupa.com/t/slide-and-bounce-an-image-on-hover-snippets-kirupa-com/352270/1 "2014-11-23T03:29:20Z")

</div>

by [kirupa](http://www.kirupa.com/me/index.htm) | 11 October 2012

Commonly, you only see transitions being used on hover. Given some of the limitations transitions have in defining rich animations, this snippet shows how you can play a CSS animation on hover instead to create both a slide and a bounce. I also handle the handoff problem animations have when you hover out while the hover-in animation is still playing.

* * *
This is a companion discussion topic for the original entry at [http://www.kirupa.com/snippets/slide\_bounce\_image\_on\_hover.htm](http://www.kirupa.com/snippets/slide_bounce_image_on_hover.htm)