Animations allow us to create more complicated transforms.

To start off with, we need an animation function, @keyframes

Ex:

@keyframes pop {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.3);
  }
  50% {
    transform: rotate(45deg);
    background: tomato;
  }
  100% {
    transform: rotate(0);
  }
}

Next, in the element section, we apply the animation:

.box {
  height: 200px;
  width: 200px;
  background-color: gold;
  /* Apply animation */
  animation-name: pop;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
  animation-direction: alternate;
  /* apply them all at one */
  animation: pop 4s ease-out;
}

CSS Animation