Javascript 扩展div'；使另一个收缩的宽度

我试图使一个div的宽度扩大，在这样做的时候，我也希望它的宽度左边的div缩小到0px的宽度，然后消失

这就是我所拥有的

我无法使第一个（左）div的宽度缩小。我还需要第三个div（右）永远不改变大小，不受动画的影响

html

---

如果没有理由使用绝对位置，可以尝试使用内联

Flexbox

容器，在第二个元素的

flex

速记属性上使用动画

main{
显示：内联flex；}
主要部门{
利润率：0.5px；
框大小：边框框；
溢出：隐藏；
边框：3px虚线#9bc；}
#一{
弹性基准：200px；
宽度：200px；}
#二{
弹性：100；
动画：向前展开5s线性0s；}
#三{
flex:0100px；
宽度：100px；}
@关键帧展开{
100%{flex:10200px；}
}

一
二
三

我在容器上使用了display:flex，并删除了元素的所有定位。我认为它能满足你的需求：

.App {
  font-family: sans-serif;
  text-align: center;
}

#container {
  display: flex;
  border-style: dotted;
  height: 100px;
  width: 318px;
}

#one {
  border-style: dotted;
  border-color: red;
  width: 200px;
  height: 100px;
  min-width: 0px;
}

#two {
  border-style: dotted;
  border-color: cadetblue;
  width: 0px;
  height: 100px;
  max-width: 200px;
  animation: enter-right 20s linear infinite;
}

#three {
  border-style: dotted;
  border-color: goldenrod;
  width: 100px;
  min-width: 100px;
  height: 100px;
}

@keyframes enter-right {
  0% {
    transform: translateX(0);
  }
  10%,
  90% {
    transform: translateX(0);
  }
  98%,
  100% {
    width: 100%;
    /* transform: translateX(100%); */
  }
}

---

您的箱子有绝对位置的特殊原因吗？

#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%;

  }
}

.App {
  font-family: sans-serif;
  text-align: center;
}

#container {
  display: flex;
  border-style: dotted;
  height: 100px;
  width: 318px;
}

#one {
  border-style: dotted;
  border-color: red;
  width: 200px;
  height: 100px;
  min-width: 0px;
}

#two {
  border-style: dotted;
  border-color: cadetblue;
  width: 0px;
  height: 100px;
  max-width: 200px;
  animation: enter-right 20s linear infinite;
}

#three {
  border-style: dotted;
  border-color: goldenrod;
  width: 100px;
  min-width: 100px;
  height: 100px;
}

@keyframes enter-right {
  0% {
    transform: translateX(0);
  }
  10%,
  90% {
    transform: translateX(0);
  }
  98%,
  100% {
    width: 100%;
    /* transform: translateX(100%); */
  }
}