Bouncing Ball Animation using CSS | CSS Animation

Here is the Bouncing Ball Animation using CSS. CSS Animation helps you teach about Pure CSS Animation. Here is the code for Bouncing Ball using only CSS.   Bouncing Ball Animation using CSS

BounceBall.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bouncing Ball</title>
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
    <div class="center">
      <div class="ball"></div>
      <div class="shadow"></div>
    </div>
    <h1>Bouncing Ball Animation</h1>  
  </body>
</html>

Style.css

body{
  margin:0;
  padding: 0;
  background:#c4102b;
}
h1
{
  margin-top: 40%;
  text-align: center;
  font-size: 5em;
  color: white;
  font-family: Tahoma;
}
.center
{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-505,-50%);
}
.ball
{
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #afed19;
  transform: translate(-50%,-50%);
  overflow: hidden;
  animation: ani 2s linear infinite;
}
.ball:before
{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-sizing: border-box;
  background: transparent;
  border:5px solid white;
  left:-65%;
  filter:blur(1px);
}
.ball:after
{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-sizing: border-box;
  background: transparent;
  border:5px solid white;
  right:-65%;
  filter:blur(1px);
}
@keyframes ani
{
  0%
  {
    transform: translate(-50%,-50%) translateY(-250px) rotate(0deg);
  }
  50%
  {
    transform: translate(-50%,-50%) translateY(0px) rotate(180deg);
  }
  100%
  {
    transform: translate(-50%,-50%) translateY(-250px) rotate(360deg);
  }
}
.shadow
{
  position: absolute;
  width: 150px;
  height: 50px;
  transform:translate(-50%,100%);
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  z-index: -1;
  filter: blur(3px);
  animation: shadow 2s linear infinite;
}
@keyframes shadow
{
  0%
  {
    transform:translate(-50%,100%) scale(1);
  }
  50%
  {
    transform:translate(-50%,100%) scale(.5);
  }
  100%
  {
    transform:translate(-50%,100%) scale(1);
  }
}

Output

bouncing ball animation using css | css animation, animation css, pure css

This is the HTML and CSS code for bouncing ball animation. Download source code here: Download  

Follow my blog with Bloglovin