CSS Animation: Bouncing Ball

CSS Animation: Bouncing Ball

Yuki R.'s photo
Yuki R.
·

1 min read

You can create a bouncing ball with simple HTML mockup and keyframe.

HTML Code

<div class="dpurple-ball"></div>

CSS

.dpurple-ball {
  position:absolute;
  right:-100px;
  bottom:0;
  display: block;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background-color: #2e0a6c;

  animation: dpurple-ball 6s ease-in 4s 1 alternate forwards;
}

@keyframes dpurple-ball {
    0% {
    animation-timing-function: ease-in;
    opacity: 0;
    transform: translate3d(105px, -105px, 0);
  }

  14% {
    opacity: 1;
  }

  40% {
    animation-timing-function: ease-in;
    transform: translate3d(75px, -75px, 0);
  }

  65% {
    animation-timing-function: ease-in;
    transform: translate3d(55px, -55px, 0);
  }

  82% {
    animation-timing-function: ease-in;
    transform: translate3d(25px, -25px, 0);
  }

  93% {
    animation-timing-function: ease-in;
    transform: translate3d(10px, -10px, 0);
  }

  25%,
  55%,
  75%,
  87% {
    animation-timing-function: ease-out;
    transform: translate3d(0, 0, 0);
  }

  100% {
    animation-timing-function: ease-out;
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

This CSS Animation Generator Tool comes handy.

https://codepen.io/yukirosene/pen/vYJGMyM

See the Pen

CSS Animation