<span id="box"></span>
#box{
  display:block;
  width:10px;
  height:100px;
  background:gold;
  animation-name:expansion;
  animation-duration:2s;
  animation-timing-function:ease-in;
  animation-delay:1s;
  animation-iteration-count:2;
  animation-direction:alternate;
  animation-fill-mode:forwards;
  animation-play-state:running;
}
@keyframes expansion{
  0%{
    width:10px;
  }
  100%{
    width:300px;
    background:tomato;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.