onload item animations

sample onload css animation

by John Doe

HTML

<div class="wrapper">

    <a class="first button" href="#">1</a>
    <a class="second button" href="#">2</a>
    <a class="third button" href="#">3</a>
    <a class="fourth button" href="#">4</a>
    <a class="fifth button" href="#">5</a>
    <a class="sixth button" href="#">6</a>
    <a class="seventh button" href="#">7</a>
    <a class="eighth button" href="#">8</a>
    <a class="nineth button" href="#">9</a>
    <a class="tenth button" href="#">10</a>
    <a class="eleventh button" href="#">11</a>
    <a class="twelfth button" href="#">12</a>
    <a class="thirteenth button" href="#">13</a>
    <a class="fourteenth button" href="#">14</a>
    <a class="fifthteenth button" href="#">15</a>
    <a class="sixteenth button" href="#">16</a>
    <a class="seventeenth button" href="#">17</a>
    <a class="eightteenth button" href="#">18</a>

<a class="logo">kalutamas<span class="icon"></span></a>
</div>

CSS

.wrapper{
    width:495px;
    height:260px;
    display:block;
    line-height:225px;
    background-color:#4679BD;
    text-align:center;
}
#logo{
    
}
.logo{
    display:inline-block;
    font-family:arial;
    font-size:30px;
    line-height:50px;
    height:50px;
    margin: 0 auto;
    color:#FFFFFF;
    margin-top: -15px;
}
.icon{
    background-image: url('http://jsfiddle.net/img/logo.png');
    background-repeat: no-repat;
    width:40px;
    height:22px;
    display:block;
    float:right;
    background-repeat: no-repeat;
    margin-left: 5px;
    margin-top: 15px;
}
ul{
    background-color:#F6F6F6;
}
.button{
    display:block;
    float: left;
    margin:5px;
    width:15px;
    height:15px;
    line-height:15px;
    text-align:center;
    font-size:12px;
    font-family:arial;
    text-decoration:none;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius:26px;
}
/*--==[ first ]==--*/
.first:hover ~ .logo{
    animation: first 600ms ease-in-out;
}

@keyframes first { 
    0% { transform: translateY(10%);
        opacity:0.5;   
    }
    25% { transform: translateY(50%);
        opacity:0;
    }
    50% { transform: translateY(75%);
        opacity:0;
    }
    75% { transform: translateY(40%);
        opacity:0;
    }
    100% { transform: translateY(0%);
        opacity:1;
    }
}
/*--==[ second ]==--*/
.second:hover ~ .logo{
    animation: second 600ms ease-in-out;
}

@keyframes second { 
    0% { transform: translateY(-10%);
        opacity:0.5;   
    }
    25% { transform: translateY(-50%);
        opacity:0;
    }
    50% { transform: translateY(-75%);
        opacity:0;
    }
    75% { transform: translateY(-40%);
        opacity:0;
    }
    100% { transform: translateY(0%);
        opacity:1;
    }
}
/*--==[ third ]==--*/
.third:hover ~ .logo{
    animation: third 600ms ease-in-out;
}

@keyframes third { 
    0% { transform: translateX(10%);
        opacity:0.5;   
    }
    25% { transform: translateX(50%);
       ...