<div class="box"></div>
.box {
  background-color: #f00;
  width: 100px;
  height: 50px;
  animation-name: anime1;
  animation-duration: 4s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 0s;
}

@keyframes anime1 {
  0% {
    height: 50px;
  }
  25% {
    height: 100px;
    background-color: #e3e612;
  }
  50% {
    height: 150px;
    background-color: #3f3;
  }
  75% {
    height: 100px;
    background-color: #12b5e6;
  }
  100% {
    height: 50px;
    background-color: #5a12e6;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.