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