为什么我的动画不起作用？仅CSS

我的HTML文件：

*{
保证金：0；
}
.盒子{
宽度：0px；
身高：0%；
背景：绿色；
边框：1px纯黑；
动画名称：成长；
动画持续时间：2秒；
}
@关键帧增长{
从{宽度：0px；高度：0%；背景：红色；}
至{宽度：340px；高度：100%；背景：绿色；}
}

---

添加

位置：绝对到
框
。
您的动画无法工作，因为躯干高度为0


*{
保证金：0；
}
.盒子{
宽度：0px；
身高：0%；
背景：绿色；
边框：1px纯黑；
动画名称：成长；
动画持续时间：2秒；
位置：绝对位置；
}
@关键帧增长{
从{宽度：0px；高度：0%；背景：红色；}
至{宽度：340px；高度：100%；背景：绿色；}
}
非常感谢。最后一个问题。我怎样才能让它停留？我的意思是，在它伸展/生长后，它不会保持这种状态，它会消失。谢谢。我明白了！！！只需将最终宽度和高度添加到
.box
。