CSS3 Menu Tutorial : Cool Bouncing Effects

Wedesignpixel

   

       

           
• Home

           
• Services

           
• Portfolio

           
• Product

           
• Contact

       

   

/* CSS Document */

body
{
    background:#573C47;
}
.body
{
    width:45%;
    margin:5% auto;
}
h1
{
    color:#fff;
    font-family: 'Source Code Pro', sans-serif;
    font-size:36px;
    text-align:center;
}
nav
{
    position:relative;
    margin-top:20%;
}
nav ul li
{
    position:relative;
    list-style:none;
    display:inline-block;
}

nav ul li a
{
    text-decoration:none;/*Remove underline from links*/
    color:#fff;
    display:block;
    height:75px;
    width:120px;
    background:#FF3C47;
    border-radius:50%;/*used to make Circle*/
    text-align:center;
    padding-top:45px;/* adjust padding top and height of "a" tag properly*/
    transition:all 0.2s ease-in;/*make transitu=ion smooter with ease-in effect*/
    -moz-transition:all 0.2s ease-in;
    -o-transition:all 0.2s ease-in;
    -webkit-transition:all 0.2s ease-in;
    font-family: 'Source Code Pro', sans-serif;/*google fonts*/

}

/*Animation effect using keyframes*/
@keyframes bounce
{
0%
{
    -moz-transform:translateY(0px);/*translateY used to chnage the postion with respect to Y-axis*/
}
25%
{
    -moz-transform:translateY(-10px);
}
50%
{
    -moz-transform:translateY(0px);
}
75%
{
    -moz-transform:translateY(10px);
}
100%
{
    -moz-transform:translateY(0px);
}   
}

/*Bouncing animation effect for mozilla browsers*/
@-moz-keyframes bounce
{
0%
{
    -moz-transform:translateY(0px);
}
25%
{
    -moz-transform:translateY(-10px);
}
50%
{
    -moz-transform:translateY(0px);
}
75%
{
    -moz-transform:translateY(10px);
}
100%
{
    -moz-transform:translateY(0px);
}

}
/*Bouncing animation effect for IE browsers*/
@-webkit-keyframes bounce
{
0%
{
    -webkit-transform:translateY(0px);
}
25%
{
    -webkit-transform:translateY(-10px);
}
50%
{
    -webkit-transform:translateY(0px);
}
75%
{
    -webkit-transform:translateY(10px);
}
100%
{
    -webkit-transform:translateY(0px);
}   
}
/*Bouncing animation effect for opera browsers*/
@-o-keyframes bounce
{
0%
{
    -moz-transform:translateY(0px);
}
25%
{
    -moz-transform:translateY(-10px);
}
50%
{
    -moz-transform:translateY(0px);
}
75%
{
    -moz-transform:translateY(10px);
}
100%
{
    -moz-transform:translateY(0px);
}   
}

/*Properties to control the animation*/
nav ul li a:hover
{
    animation-name: bounce;
    animation-duration: 0.3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-delay: 0;
    animation-play-state: running;
    animation-fill-mode: forwards;

    -moz-animation-name: bounce;
    -moz-animation-duration: 0.3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

    -webkit-animation-name: bounce;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -o-animation-name: bounce;
    -o-animation-duration: 0.3s;
    -o-animation-timing-function: linear;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: normal;
    -o-animation-delay: 0;
    -o-animation-play-state: running;
    -o-animation-fill-mode: forwards;
}