Falling Balls Animated CSS3 - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Fly

  1. HOME
  2. HTML CSS
  3. CSS Animation
  4. Fly

Description

Falling Balls Animated CSS3

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

@-webkit-keyframes color_change {
   0%   {background-color: red;}
   25%  {background-color: yellow;}
   50%  {background-color: orange;}
   75%  {background-color: green;}
   100% {background-color: blue;}
}
@-webkit-keyframes bounce {<!--   ww  w. java  2  s.co  m-->
   0%   {transform: translateY(0px);}
   50% {transform: translateY(50px);}
   100%{transform: translateY(0px);}
}
#background{
   background-color: #000;
   height: 100px;
}
.ball{
   width: 35px;
   height: 35px;
   border-radius: 35px;
   background-color: #FFF;
   display: inline-block;
}
#ball_1{
   -webkit-animation: bounce 4s linear infinite;
}
#ball_2{
   -webkit-animation: bounce 3.5s linear infinite;
}
#ball_3{
   -webkit-animation: bounce 3s linear infinite;
}


      </style> 
 </head> 
 <body> 
  <div id="background"> 
   <div id="ball_1" class="ball"></div> 
   <div id="ball_2" class="ball"></div> 
   <div id="ball_3" class="ball"></div> 
  </div>  
 </body>
</html>

Related Tutorials