html - Flexbox 项目动画

Question

我有一个 flexbox 容器，当我将鼠标悬停在它上面时，它的宽度会增加。发生这种情况时，flexbox 中的项目只会按传统方式移动。如何为 flexbox 中项目的移动设置动画？

这是我尝试过的链接。

我试过使用弹性方向和过渡，但没有运气。这是触发悬停的代码块：

section:hover{
   width: 500px;
}

标签： htmlcssanimationflexbox