Html 如何防止动画突然结束'；捕捉'；在里面

我有一个我正在做的动画布局，动画非常接近完美，但是在动画的最后阶段，你会看到顶部和底部的内部元素在最后一秒“捕捉”到不同的大小。我希望最后一个容器的内部元素高度为20%/60%/20%

是否可以这样做，并在最后消除“捕捉”效果

const one=document.querySelector（'.one'）；
constThree=document.querySelector（'.three'）；
addEventListener（'animationend'，function（）{
one.style.position='static'；
}，对）
三.addEventListener（'transitionend'，function（）{
console.log（“转换工作”）；
3.style.position='static'；
}，对）

.container{
显示器：flex；
弯曲方向：立柱；
边框：1px纯黑；
宽度：425px；
高度：500px；
利润率：5%自动；
位置：相对位置；
}
@关键帧向上{
0% {
宽度：50%；
身高：100%；
}
50% {
宽度：100%；
身高：100%；
}
100% {
宽度：100%；
身高：20%；
} 
}     
.一{
身高：100%；
宽度：50%；
背景色：#FFAB7F；
位置：绝对位置；
排名：0；
}
.容器：悬停。一个{
动画：右上1s向前；
}
/*.容器：悬停。两个{
身高：80%；
} */
.容器：悬停。三个{
身高：20%；
}
.二{
身高：100%；
宽度：100%；
背景色：#00529B；
过渡：所有1；
}
.三{
身高：0%；
宽度：100%；
背景色：#834；
位置：绝对位置；
底部：0；
过渡：所有1；
}

---

希望这是一个可以做一些改变的地方

const one=document.querySelector（'.one'）；
constThree=document.querySelector（'.three'）；
addEventListener（'animationend'，function（）{
one.style.position='static'；
}，对）
三.addEventListener（'transitionend'，function（）{
console.log（“转换工作”）；
3.style.position='static'；
}，对）

.container{
显示器：flex；
弯曲方向：立柱；
边框：1px纯黑；
宽度：425px；
高度：500px；
利润率：5%自动；
位置：相对位置；
}
@关键帧向上{
0% {
宽度：50%；
身高：100%；
}
50% {
宽度：100%；
身高：100%；
}
100% {
宽度：100%；
身高：20%；
} 
}     
.一{
身高：100%；
宽度：50%；
背景色：#FFAB7F；
位置：绝对位置；
排名：0；
}
.容器：悬停。一个{
动画：右上1s向前；
}
/*.容器：悬停。两个{
身高：80%；
} */
.容器：悬停。三个{
身高：20%；
}
.二{
身高：100%；
宽度：100%；
背景色：#00529B；
过渡：所有的1容易；
}
.三{
身高：0%；
宽度：100%；
背景色：#834；
位置：绝对位置；
底部：0；
过渡：所有的1容易；
}

---

我对您的代码做了一些修改……请告诉我此解决方案是否适合您：
（我对代码进行了注释，而不是将其删除）

/*const one=document.querySelector（'.one'）；
constThree=document.querySelector（'.three'）；
addEventListener（'animationend'，function（）{
one.style.position='static'；
}，对）
三.addEventListener（'transitionend'，function（）{
console.log（“转换工作”）；
3.style.position='static'；
}，对）*/

.container{
显示器：flex；
弯曲方向：立柱；
边框：1px纯黑；
宽度：425px；
高度：500px；
利润率：5%自动；
位置：相对位置；
}
@关键帧向上{
0% {
宽度：50%；
身高：100%；
}
50% {
宽度：100%；
身高：100%；
}
100% {
宽度：100%；
身高：20%；
} 
}     
.一{
身高：100%；
宽度：50%；
背景色：#FFAB7F；
位置：绝对位置；
排名：0；
}
.容器：悬停。一个{
动画：右上1s向前；
}
.容器：悬停。三个{
身高：20%；
}
.二{
身高：100%；
宽度：100%；
背景色：#00529B；
过渡：所有1；
}
.三{
身高：0%；
宽度：100%；
背景色：#834；
位置：绝对位置；
底部：0；
过渡：所有1；
}

我无法看到你所说的“捕捉”效果。也许那是我的眼睛！…=）我注意到了捕捉效果，但这似乎只发生在第一次进行转换时？这是正确的吗？对我来说，其他时间似乎工作得很好。@slee423这是正确的，它只发生在第一次，因为一旦JS将位置更改为“静态”，问题就不再出现了@TakitIsy请查看下面的评论！我承认我在第一次执行死刑时一定错过了。但是现在，我看到了效果！那不是我的眼睛…我太高兴了D⋅⋅⋅ 你为什么用静电？你需要吗？对不起，这个不行。但是谢谢你！绿色元素仍然具有捕捉效果，顶部元素也仍然具有锯齿状捕捉效果：（这是如此接近，但我确实需要

。两个
容器（如果有一种方法可以让它与容器中的所有3个元素一起工作，我将永远感激……我正在考虑添加更多元素以使它现在工作……如果我找到解决方案，我将与您联系。@WonkasWilly现在它可以与3个元素一起工作，但是，好吧，我所做的唯一事情就是对所有的js.div进行注释变得静止。这是一个问题吗？