CSS Keyframe Animations squareToCircle

CSS Keyframe Animations squareToCircle

by Nirvanachain

HTML

<div>
</div>

CSS

div {
  width: 200px;
  height: 200px;
  background: coral;
  -webkit-animation: squareToCircle 2s 1s infinite alternate;

}

@-webkit-keyframes squareToCircle {
   0% {
    border-radius: 0 0 0 0;
    background: coral;
    -webkit-transform: translateX(0px);
  }
  25% {
    border-radius: 50% 0 0 0;
    background: darksalmon;
    -webkit-transform: translateX(50px);
  }
  50% {
    border-radius: 50% 50% 0 0;
    background: hotpink;
    -webkit-transform: translateX(100px);
  }
  75% {
    border-radius: 50% 50% 50% 0;
    background: lightcoral;
    -webkit-transform: translateX(50px);
  }
  100% {
    border-radius: 50% 50% 50% 50%;
    background: darksalmon;
    -webkit-transform: translateX(0px);
  }
}