<div class="box">
  <div class="box1">1초후</div>
  <div class="box2">1.5초후</div>
  <div class="box3">2초후</div>
</div>
.box > div{
  width: 100px;  height: 50px;
  border: 1px solid #000;
  font-size: 20px;
  text-align: center;
  align-content: center;
}
.box:hover > div{
  animation-name: width-long;
  animation-duration: 5s;
}
.box1{
  animation-delay: 1s;
}
.box2{
  animation-delay: 1.5s;
}
.box3{
  animation-delay: 2s;
}

@keyframes width-long{
  50%{
    width: 200px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.