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

@keyframes pyonpyon {
	0% {
    transform: translate(0, 0);
  }
  5% {
    transform: translate(0, 0);
  }
	10% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(0, -15px);
  }
  25% {
    transform: translate(0, 0);
  }
	30% {
    transform: translate(0, -15px);
  }
  50% {
    transform: translate(0, 0);
  }
  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.