Html 在动画CSS中触发转换

在使用CSS的运行动画中尝试使用：hover触发转换，在下面的示例中，只有背景颜色在：hover上更改，但只有在动画停止后才会触发transform属性。如何在动画期间触发变换：旋转

此外，当我重新加载页面时，我的初始背景色：红色似乎会淡入，而没有通过：hover显式触发页面。我假设这是由转换持续时间引起的，仅使用CSS可以避免吗

.集装箱{ 高度：300px； 显示器：flex； 证明内容：中心； 对齐项目：居中； } 瑞德先生{ 宽度：100px； 高度：100px； 背景色：红色； 动画名称：动画； 动画持续时间：5s； 动画延迟：0； 动画计时功能：轻松进出； 动画方向：交替； 过渡时间：5s； 过渡性质：全部； } 红色：悬停{ 变换：旋转180度； 背景色：青色； } @关键帧动画{ 0% { 变换：scale1； } 50% { 转换：scale1.5； } 100% { 变换：scale1； } }

---

变换不会以这种方式堆叠。解决此限制的一种方法是为旋转变换使用父元素

.集装箱{ 高度：300px； 显示器：flex； 证明内容：中心； 对齐项目：居中； } 瑞德先生{ 宽度：100px； 高度：100px； 背景色：红色； 动画名称：动画； 动画持续时间：5s； 动画延迟：0； 动画计时功能：轻松进出； 动画方向：交替； 过渡时间：5s； 过渡性质：全部； } 红色：悬停{ 背景色：青色； } .包裹{ 过渡：所有5s； } .wrap:悬停{ 变换：旋转180度； } @关键帧动画{ 0% { 变换：scale1； } 50% { 转换：scale1.5； } 100% { 变换：scale1； } }

---

变换不会以这种方式堆叠。解决此限制的一种方法是为旋转变换使用父元素

.集装箱{ 高度：300px； 显示器：flex； 证明内容：中心； 对齐项目：居中； } 瑞德先生{ 宽度：100px； 高度：100px； 背景色：红色； 动画名称：动画； 动画持续时间：5s； 动画延迟：0； 动画计时功能：轻松进出； 动画方向：交替； 过渡时间：5s； 过渡性质：全部； } 红色：悬停{ 背景色：青色； } .包裹{ 过渡：所有5s； } .wrap:悬停{ 变换：旋转180度； } @关键帧动画{ 0% { 变换：scale1； } 50% { 转换：scale1.5； } 100% { 变换：scale1； } }

---

谢谢你的回答，我在发布问题之前亲自尝试了你的解决方案，效果很好，我只是想知道我是否可以在没有父元素的情况下完成。当我加载页面时，背景颜色会褪色吗，我可以去掉它吗？这样.red div就会立即显示出来？我不相信在这个场景中有任何其他方法可以使用多个变换。我不知道你所说的加载页面时背景颜色淡入是什么意思。红色方块应该立即可见。我使用chrome，当重新加载页面时。红色div从不可见到完全可见只需5秒，如果我删除转换持续时间：5s；然后它立即出现。但在本例中，当我从.red分区中移除光标时，我失去了从青色到红色的缓慢转换。这就是您在上面的示例中看到的？还是在你自己的网页上？谢谢你的回答，我在发布问题之前自己尝试了你的解决方案，效果很好，我只是想知道我是否可以在没有父元素的情况下完成。当我加载页面时背景颜色会褪色吗，我可以去掉它吗？这样.red div就会立即显示出来？我不相信在这个场景中有任何其他方法可以使用多个变换。我不知道你所说的加载页面时背景颜色淡入是什么意思。红色方块应该立即可见。我使用chrome，当重新加载页面时。红色div从不可见到完全可见只需5秒，如果我删除转换持续时间：5s；然后它立即出现。但在本例中，当我从.red分区中移除光标时，我失去了从青色到红色的缓慢转换。这就是您在上面的示例中看到的？还是在你自己的网页上？