这种情况下的最佳动画选项

Best Animation Option for this situation

我正在尝试找出编辑 CSS 两种状态之间过渡的最佳方法。我愿意接受任何建议。我对 Javascript 不是很有经验,但我正在寻找一些关于在哪里寻找信息的建议,或者我是否以完全错误的方式处理这个问题。任何事情都会有所帮助。

所以我 javascript 将 class 添加到 div 然后将更改 div 的 CSS 当 class 被应用。我正在寻找一种在这两个 CSS 状态之间稍微平滑地转换的方法。也许我正在尝试找到一种“太简单”的方法来执行此操作,但这是唯一对我有用的方法。

这是我目前在 playcode.io 上使用的代码: https://playcode.io/650950

CSS 选项会更可取,但我认为这超出了 CSS 的能力范围。

提前感谢您的帮助。 :)

您可能想查看 css 中的过渡 属性。它完全满足您的需求,为另一个 css 属性.

中的变化设置动画

https://www.w3schools.com/css/css3_transitions.asp