Animation How to - Create falling down effect animation

Question

We would like to know how to create falling down effect animation.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#circle {<!--   w  w  w  . j  ava  2 s .co  m-->
  border-radius: 50%;
  border: 4px solid red;
  width: 20px;
  height: 20px;
  bottom: auto;
  position: absolute;
  animation: falling 1s, rotate 2s;
  animation-delay: 0s, 1s;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards, both;
  -webkit-animation: falling 1s, rotate 2s;
  -webkit-animation-delay: 0s, 1s;
  -webkit-animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards, both;
}

@keyframes falling { 
   0% {bottom: 100%;}
   100%{bottom:0%;}
}
@keyframes rotate { 
   0% {-webkit-transform: rotateX(0deg);}
   100%{-webkit-transform:rotateX(360deg);}
}
@-webkit-keyframes falling { 
   0% {bottom: 100%;}
   100%{bottom:0%;}
}
@-webkit-keyframes rotate { 
   0% {-webkit-transform: rotateX(0deg);}
   100%{-webkit-transform:rotateX(360deg);}
}
</style>
</head>
<body>
  <div id='circle'></div>
</body>
</html>

The code above is rendered as follows: