<div>o.o</div>
div {
  background: #8e44ad;
  color: white;
  padding: .2rem .3rem 1rem .3rem;
  position: absolute;
  border-radius: 2rem 2rem 0 0;
  animation-name: animar;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}
@keyframes animar{
  0% {
    left: 0;
    top: 0;
  }
  10% {
    left: 5rem;
    top: 0rem;
    color: #9b59b6;
  }
  30% {
    top: 5rem;
    left: 5rem;
    color: white;
  }
  60%{
    top: 5rem;
    left: 0;
    color: #9b59b6;
  }
  100% {
    top: 0;
    left: 0;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.