Cool Animation

Animation example

by jshacker

HTML

<div></div>

CSS

@keyframes coolAnimation {
  from {
    background-color: red;
    transform: translateX(0) rotate(0);
    border-radius: 0;
    height: 100px;
    width: 100px;
  }

  30% {
    background-color: green;
    transform: translateX(300px) rotate(90deg);
    height: 200px;
    width: 200px;
  }

  70% {
    background-color: blue;
    transform: translateY(300px) rotate(90deg);
    height: 300px;
    width: 300px;
  }

  to {
    background-color: yellow;
    border-radius: 50%;
    transform: translateY(-100px) rotate(-90deg);
    height: 100px;
    width: 100px;
  }
}

div {
  animation: coolAnimation 3s infinite;
}