FontAwesome 半动画？

问：

我目前正在尝试使用他们的动画来制作过渡动画。例如，如果我按下一个按钮，我希望它播放带有雪花图标的抖动动画的前半部分，切换到其他图标，然后在不同的图标中播放动画的后半部分。这是我在图标内的代码：

<Button variant="contained" style={{ borderRadius: 50, transition: 'all 0.3s ease', }} onClick={() => acChange(acMode)} color={ acMode === 1 ? "cool" : acMode === 2 ? "heat" : acMode === 3 ? "fan" : "autoMode" } > <FontAwesomeIcon icon={acMode === 1 ? faSnowflake : acMode === 2 ? faFire : acMode === 3 ? faFan : faSnowflake} size="lg" shake style={{ transition: 'all 0.3s ease', }}/> </Button>

现在，淡入淡出只是连续播放。此外，即使我在这里有过渡样式，它仍然根本没有进行过渡。按钮模块是一个 mui 按钮组件，但即使我将图标放在按钮组件之外，它仍然不会进行任何转换。