Nick Div Nick Div - 23 days ago 5
CSS Question

Create a bounce effect on hover

I have to develop a similar website like http://www.unlocknrepair.com/
In this website when you hover your mouse over the Unlocking or Phone repair button a dropdown menu appears. Is there a way to make this dropdown appear in bouncy way.. like I want it to bounce a bit before it stabilizes. It is possible in jQuery, but can it be done using only css and javascript?

Answer

If experimental css3 is an option, you can do it even without javascript using css animations with the @keyframes rule.

#parent {
    position:relative;
     height: 40px;
}

#onhover {
    display: none;
    position: absolute;
    top: 0;
    
}

#parent:hover #onhover {
    display: block;
    top: 30px;
    animation:mymove 0.8s linear;
    -moz-animation:mymove 0.8s linear; /* Firefox */
    -webkit-animation:mymove 0.8s linear; /* Safari and Chrome */
    -o-animation:mymove 0.8s linear; /* Opera */
    -ms-animation:mymove 0.8s linear; /* IE */
}

@keyframes mymove
{
0%   {top:0px;}
10%  {top:3px;}
40%  {top:40px;}
60%  {top:25px;}
80%  {top:35px;}
100% {top:30px;}
}

@-moz-keyframes mymove /* Firefox */
{
0%   {top:0px;}
10%  {top:3px;}
40%  {top:40px;}
60%  {top:25px;}
80%  {top:35px;}
100% {top:30px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px;}
10%  {top:3px;}
40%  {top:40px;}
60%  {top:25px;}
80%  {top:35px;}
100% {top:30px;}
}

@-o-keyframes mymove /* Opera */
{
0%   {top:0px;}
10%  {top:3px;}
40%  {top:40px;}
60%  {top:25px;}
80%  {top:35px;}
100% {top:30px;}
}

@-ms-keyframes mymove /* IE */
{
0%   {top:0px;}
10%  {top:3px;}
40%  {top:40px;}
60%  {top:25px;}
80%  {top:35px;}
100% {top:30px;}
}
<div id="parent">hover me<div id="onhover">hovering</div></div>

Another "bounce" animation:

$(function() {

$(document.body).delegate( "img", "mouseenter", function() {
    var $this = $(this).addClass("right");
    setTimeout(function() {
        $this.removeClass("right");
    }, 2000);
});
    
});
body { font-size: .7em; font-family: Arial, Helvetica, "Liberation Sans", sans-serif; padding: 0 !important; }
img {
    -moz-transition: -moz-transform 1s ease-in;
    -webkit-transition: -webkit-transform 1s ease-in;
    -o-transition: -o-transform 1s ease-in;
    -ms-transition: -ms-transform 1s ease-in;
}
#anim.right {
    -moz-animation-name: bounce;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: 1;
    -moz-transform: translate(400px);
    -moz-transition: none;

    -webkit-animation-name: bounce;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform: translate(400px);
    -webkit-transition: none;
}

@-moz-keyframes bounce {
  from {
    -moz-transform: translate(0px);
    -moz-animation-timing-function: ease-in;
  }
  60% {
    -moz-transform: translate(400px);
    -moz-animation-timing-function: ease-out;
  }
  73% {
    -moz-transform: translate(360px);
    -moz-animation-timing-function: ease-in;
  }
  86% {
    -moz-transform: translate(400px);
    -moz-animation-timing-function: ease-out;
  }
  93% {
    -moz-transform: translate(380px);
    -moz-animation-timing-function: ease-in;
  }
  to {
    -moz-transform: translate(400px);
    -moz-animation-timing-function: ease-out;
  }
}

@-webkit-keyframes bounce {
  from {
    -webkit-transform: translate(0px);
    -webkit-animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: translate(400px);
    -webkit-animation-timing-function: ease-out;
  }
  73% {
    -webkit-transform: translate(360px);
    -webkit-animation-timing-function: ease-in;
  }
  86% {
    -webkit-transform: translate(400px);
    -webkit-animation-timing-function: ease-out;
  }
  93% {
    -webkit-transform: translate(380px);
    -webkit-animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: translate(400px);
    -webkit-animation-timing-function: ease-out;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<img id="anim" src="http://hacks.mozilla.org/wp-content/uploads/2011/04/75px-Aurora210.png" width="75" height="75" />

See Mozilla Developer Network for more details and browser compatibility.