<div class="transition-box">
</div>
.transition-box {
/* Regular Styles */
  height: 80px;
  width: 80px;
  display: grid;
  place-items: center;
  background: #A35700;
  border-radius: 12px;
  transform: rotate(0deg) translateX(0);
  
/* Animation Styles */
  animation: cssnmotion 3s ease-in-out infinite;
}

@keyframes cssnmotion {
  0% {
    transform: rotate(0deg) translateX(0px);
    border-radius: 12px;
  }
  33% {
    transform: rotate(360deg);
    border-radius: 40px;
  }
  66% {
    transform: rotate(0deg) translateX(150px);
    border-radius: 40px;
  }
  100% {
    transform: rotate(0deg);
    border-radius: 12px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.