<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;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.