Bài viết CSS hay - Bouncing Ball Animation

CSS

Mã:

@-webkit-keyframes travel {
  from {              }
  to  { left: 640px; }
}
 
@-webkit-keyframes bounce {
  from, to  {
    -webkit-animation-timing-function: ease-out;
  }
  50% {
    bottom: 220px;
    -webkit-animation-timing-function: ease-in;
  }
}
 
@-webkit-keyframes spin {
  from {                                    }
  to  { -webkit-transform: rotateZ(360deg); }
}
 
/* keyframes definition for Mozilla browsers */
 
@-moz-keyframes travel {
  from { left: 0;    }
  to  { left: 640px; }
}
 
@-moz-keyframes bounce {
  from, to  {
    bottom: 0;
    -moz-animation-timing-function: ease-out;
  }
  50% {
    bottom: 220px;
    -moz-animation-timing-function: ease-in;
  }
}
 
@-moz-keyframes spin {
  from { -moz-transform: rotate(0);      }
  to  { -moz-transform: rotate(360deg); }
}
 
/* styles for the stage and animated elements */
 
#stage {
  position: relative;
  margin: 1em auto;
  width: 660px;
  height: 240px;
  border: 2px solid #666;
  background: #cff;
}
 
#traveler {
  position: absolute;
  width: 20px;
  height: 240px;
 
  -webkit-animation-name: travel;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-duration: 4.8s;
 
  -moz-animation-name: travel;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: alternate;
  -moz-animation-duration: 4.8s;
}
 
#bouncer {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: red;
  background: -webkit-gradient(radial, 60% 40%, 0, 60% 40%, 10, from(rgba(255,255,255,0.8)), to(red)) red;
  background: -moz-radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), red 50%) red;
 
  -webkit-animation-name: bounce,spin;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 4.2s;
 
  -moz-animation-name: bounce,spin;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 4.2s;
}

Dán HTML code này vào Code của trang

Mã:

<div id="stage">
<div id="traveler">
<div id="bouncer">
</div>
</div>
</div>

Demo: http://tảidt.vn