<div class="demos">
  <div class="demo"> </div>
</div>
:root {
  --bounce-easing: linear(
    0, 0.063, 0.25 18.2%, 1 36.4%, 0.813, 0.75, 0.813, 1, 0.938, 1, 1
  );
}
.demo{
  animation-timing-function: var(--bounce-easing);
  position: fixed;
  left: 50%;
  top: 5%;
  animation-name: bigger;

  animation-duration: 3s;
  animation-iteration-count: infinite;
  transform-origin: left top;
  width: 30px;
  height: 30px;
  border-radius: 50%;
/*   border-radius: 50%; */
  background: blue;
}
@keyframes bigger{
  100%{
    transform: translateY(200px);
    background: #353567;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.