Page Widget How to - Create bouncing in menu items

Question

We would like to know how to create bouncing in menu items.
Answer


<!--from  ww  w. jav a 2s.c o  m-->
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
@-webkit-keyframes Bounce-In {
    0% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
    60% { -webkit-transform: scale(0.7) }
    80% { -webkit-transform: scale(1.0) }
    90% { -webkit-transform: scale(0.9) }
    100% { -webkit-transform: scale(1.0) }
}
@-webkit-keyframes Bounce-Out{
    0% { -webkit-transform: scale(1.0) }
    40% { -webkit-transform: scale(0.1) }
    60% { -webkit-transform: scale(0.4) }
    80% { -webkit-transform: scale(0.1) }
    90% { -webkit-transform: scale(0.2) }
    100% { -webkit-transform: scale(0) }
}
.Games {
    height: 100px;
    width: 100px;
    position: relative;
    top: 100px;
    left: 475px;
    z-index: 200;
    -webkit-animation-name: Bounce-In;
    -webkit-animation-fill-mode: both;
    -webkit-animation-delay: .4s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 1.2s;
    background-color: red;
    -webkit-border-radius:100px;
}
.Events 
{
    background-color: #EEE;
    -webkit-border-radius:100px;
    height: 100px;
    width: 100px;
    position: absolute;
    top: 140px;
    left: 315px;
    z-index: 200;
    -webkit-animation-name: Bounce-In;
    -webkit-animation-fill-mode: both;
    -webkit-animation-delay: .6s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 1.2s;
    line-height:100px;
}
.Sports 
{
    background-color: red;
    -webkit-border-radius:100px;
    height: 100px;
    width: 100px;
    position: absolute;
    top: 140px;
    left: 150px;
    z-index: 200;
    -webkit-animation-name: Bounce-In;
    -webkit-animation-fill-mode: both;
    -webkit-animation-delay: 1.0s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 1.2s;
    line-height:100px;
}
  </style>

</head>
<body>
    <div class="Games" id="games"><p>GAMES</p></div>
    <div class="Events" id="events"><p>EVENTS</p></div>
    <div class="Sports" id="sports"><p>SPORTS</p></div>
</body>
</html>
The code above is rendered as follows: