CSS Animation Basketball Bouncing - CSS - Do It Yourself

Type in your code below

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<meta content="ie=edge" http-equiv="X-UA-Compatible"/>
<title>Twitter Bird</title>
<link href="./index.css" rel="stylesheet"/>
<style>
    .court {
      width: 100%;
      height: 100vh;
      background-image: url("https://cdn.lyty.dev/site-images/empty-basketball-court.jpg");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
    }

html,
    body {
      height: 100%;
      margin: 0;
    }

.basket-ball {
      background-image: url("https://cdn.lyty.dev/site-images/ball.png");
      width: 100px;
      height: 100px;
      position: absolute !important;
      bottom: 2.7vh;
      z-index: 10;
      background-repeat: no-repeat;
      background-size: 100%;
    }

.basket-ball-shadow {
      background: radial-gradient(50% 50%, #000 0%, transparent);
      height: 40px;
      width: 60px;
      left: 50.7%;
      transform: translateX(-50%)
    }

.net {
      position: absolute;
      left: 48%;
      transform: translateX(-50%);
      width: 120px;
      z-index: 2;
      animation-name: ball;
      top: 15.2vh;
      animation-duration: 5s;
      animation-iteration-count: 1;

}

.basket-ball-shadow {
      -webkit-animation-direction: alternate;
      -webkit-animation-duration: 4s;
      -webkit-animation-name: shadow;
      -webkit-animation-iteration-count: 1;
      animation-direction: alternate;
      animation-duration: 4s;
      animation-name: shadow;
      animation-iteration-count: 1;
      bottom: 0;
      position: absolute;
    }

.basket-ball {
      -webkit-animation-duration: 4s;
      -webkit-animation-name: bounce;
      -webkit-animation-iteration-count: 1;
      animation-duration: 4s;
      animation-name: bounce;
      animation-iteration-count: 1;
      left: 51%;
      transform: translateX(-50%);
      position: absolute;
    }

@keyframes shadow {
      0% {
        bottom: 3vh;
        height: 10px;
        width: 15px;
      }

4.285% {

height: 50px;
        width: 200px;

}

28.570% {
        height: 8px;
        bottom: 19vh;
        width: 13px;
      }

42.855% {
        bottom: 19vh;

height: 45px;
        width: 150px;

}

57.140% {
        height: 6px;
        width: 11px;
        bottom: 27vh;

}

71.425% {
        bottom: 27vh;
        height: 40px;
        width: 100px;
      }

85.710%,
      99% {
        height: 4px;
        width: 9px;
        bottom: 35vh;
        left: 50%;
        transform: translateX(-50%)
      }

100% {
        height: 30px;
        width: 80px;
        bottom: 45vh;
        left: 50%;
        transform: translateX(-50%)
      }

}

@keyframes bounce {
      0% {
        bottom: 3vh
      }

4.285% {
        bottom: 80%;
      }

28.570% {
        bottom: 15vh;
        background-size: 80%;
      }

42.855% {
        bottom: 80%;
      }

57.140% {
        background-size: 60%;
        bottom: 20vh;
      }

71.425% {
        bottom: 74%;
        background-size: 40%;
      }

85.710%,
      87% {
        bottom: 64vh;
        background-size: 35%;
      }

100% {
        z-index: 1;
        bottom: 28vh;
        background-size: 40%;

}
    }

.s {
      position: absolute;
      left: 50%;
    }

@keyframes shadow-moving {
      0% {
        bottom: 3vh
      }

14.285% {}

28.570% {
        bottom: 19vh;
      }

57.140% {
        background-size: 60%;
        bottom: 27vh;
      }

100% {
        z-index: 1;
        bottom: 28vh;
        background-size: 40%;

}
    }

@media(max-width: 1024px) {
      .basket-ball {
        width: 80px;
        height: 80px;
      }

.net {
        width: 70px;
      }

}

@media(max-width:768px) {
      .basket-ball {
        width: 70px;
        height: 70px;
      }
    }
  </style>
</head>
<body>
<div class="court">
<img alt="" class="net" src="https://cdn.lyty.dev/site-images/net.png"/>
<div class="basket-ball-shadow"></div>
</div>
<div class="basket-ball"></div>
</body>
</html>

Related Chapters

Related Examples