<div></div>
div {
  margin: 50px auto;
  width: 150px;
  height: 150px;
  background: black;
animation: color-change 2s ease-in-out 1s, width-change 3s ease-in 0s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}
@keyframes color-change {
  0% {
    background: black;
  }
  100% {
    background: red;
  }
}
@keyframes width-change {
  25% {
    width: 200px;
  }
  100% {
    width: 500px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.