I am attempting to create an animation where a div's width expands while causing the div to the left of it to shrink and disappear.
Here is my progress so far: link
The challenge I'm facing is getting the width of the first (left) div to actually shrink. Additionally, I need the third div (on the right) to remain unaffected by the animation and maintain its size.
html
<div id='container'>
<div id='one'>one</div>
<div id='two'>two</div>
<div id='three'>three</div>
</div>css
#container {
position: relative;
border-style: dotted;
height: 100px;
width: 318px;
}
#one {
border-style: dotted;
border-color: red;
left: 0;
width: 200px;
height: 100px;
min-width: 0px;
position: absolute;
}
#two {
border-style: dotted;
border-color: cadetblue;
width: 0px;
height: 100px;
max-width: 200px;
position: absolute;
top: 0;
right: 100px;
animation: enter-right 20s linear infinite;
}
#three {
border-style: dotted;
border-color: goldenrod;
width: 100px;
right: 0;
min-width: 100px;
height: 100px;
position: absolute;
}
@keyframes enter-right {
0% {
transform: translateX(0);
}
10%, 90% {
transform: translateX(0);
}
98%, 100% {
width: 100%;
}
}