Bounce Effect in CSS Only Using CSS3

Ever wanted to have a nice bouncy effect when hovering over something without the use of javascript or hard to learn advanced code?
Use this for your HTML:

1
2
3
    <div class="bounce-cnt">
        <div class="bounce-r" id="the-button">asdf</div>
    </div>

And complement with this for your CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
@keyframes hover-over {
    0% {padding: 10px; left: 0px; top: 0px; opacity: 0.7; }
    50% {padding: 16px; left: -6px; top: -6px; opacity: 1; }
    100% {padding: 13px; left: -3px; top: -3px; opacity: 1; }
}
@-webkit-keyframes hover-over {
    0% {padding: 10px; left: 0px; top: 0px; opacity: 0.7; }
    50% {padding: 16px; left: -6px; top: -6px; opacity: 1; }
    100% {padding: 13px; left: -3px; top: -3px; opacity: 1; }
}
@keyframes hover-out {
    0% {padding: 13px; left: -3px; top: -3px; opacity: 1; }
    50% {padding: 16px; left: -6px; top: -6px; opacity: 1; }
    100% {padding: 10px; left: 0px; top: 0px; opacity: 0.7; }
}
@-webkit-keyframes hover-out {
    0% {padding: 13px; left: -3px; top: -3px; opacity: 1; }
    50% {padding: 16px; left: -6px; top: -6px; opacity: 1; }
    100% {padding: 10px; left: 0px; top: 0px; opacity: 0.7; }
}

.bounce-cnt {
    position: relative;
}
.bounce-r {
    animation-name: hover-out;
    animation-duration: 0.2;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    -webkit-animation-name: hover-out;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    position: absolute;
    top: 0;
    left: 0;
}
#the-button {
    border: 5px solid #000;
    background: #eee;
}
.bounce-r:hover {
    animation-name: hover-over;
    animation-duration: 0.2;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    -webkit-animation-name: hover-over;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
}

But you might say to yourself… “That’s a lot of CSS for one little effect”. That’s fine. Here’s why.
1. You’re not tying up the JS processing.
2. All you have to do is add class to a parent and child pair to make it look and work great, every time, without making the effort of re-writing bouncy code for every element.

Cheers!