Bounce

CSS Animate - bounce

by oakley808

HTML

<h1>Animate</h1>

<div id="box">
    <div id="ball1" class="ball"></div>
    <div id="ball2" class="ball"></div>
    <div id="ball3" class="ball"></div>
</div>

CSS

body {
    padding: 30px;
}
#box {
    border:1px solid #ccc;
    overflow:hidden;
    height:100px;
    width:400px;
    position:relative;
}
.ball {
    position: absolute;
    bottom:0px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
#ball1 {
    left: 0px;
    background: #f00;
    -webkit-animation: bounceme 3s ease;
    animation: bounceme 3s ease;
}
#ball2 {
    left: 110px;
    background: #0f0;
    -webkit-animation: bounceme 4s ease;
    animation: bounceme 4s ease;
}
#ball3 {
    left: 220px;
    background: #00f;
    -webkit-animation: bounceme 5s ease;
    animation: bounceme 5s ease;
}
@keyframes bounceme {
    50% {
        transform: translate(0, 500px);
    }
}
@-webkit-keyframes bounceme {
    50% {
        -webkit-transform: translate(0, 500px);
    }
}

JavaScript

/* 
no js needed, but jquery could do this animation in just a few lines of code using $('#thing').animate({'top':'+=100'},3000)
*/