Bouncing

by Julien Roche

HTML

<div class="square"></div>

CSS

html,
body {
  border: none;
  height: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  width: 100%;
}

body {
  align-items: center;
  display: flex;
  justify-content: center;
}

.square {
  animation-delay: 1s;
  animation-duration: 800ms;
  animation-fill-mode: forwards;
  animation-name: bouncing;
  animation-timing-function: cubic-bezier(0, 0.7, 0.6, 1);
  background-color: black;
  border: 1px solid transparent;
  border-radius: 1rem;
  height: 5rem;
  rotate: -25deg;
  width: 5rem;
}

@keyframes bouncing {
  0% {
    rotate: -25deg;
  }

  25% {
    rotate: -35deg;
  }

  55% {
    rotate: -2deg;
  }

  85% {
    rotate: -1deg;
  }

  40%, 70%, 100% {
    rotate: 0deg;
  }
}