<div class="circle1"></div>
.circle1 {
  position: absolute;
  top: 30px;
  width: 100px;
  height: 100px;
  background-color: #f756c4;
  border-radius: 100px;
  animation: fuwafuwa 2s infinite ease-in-out;
}

@keyframes fuwafuwa {
	0% {
    transform: translate(0, 0);
  }
	50% {
    transform: translate(0, -20px);
  }
	100% {
    transform: translate(0, 0);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.