如何同时触发多个不同速度的CSS动画？

以不同的速度同时触发多个 CSS 动画

在您的示例中，您的目标是同时触发两个涉及旋转和缩放效果的 CSS 动画。但是，您遇到了仅播放后一个动画的问题。

要解决此问题，正确的解决方案是使用逗号在单个动画属性中指定多个动画。每个动画可以有自己的一组属性，包括持续时间和速度。

修改示例：

.image {
    ...
    animation: spin 2s linear infinite, scale 4s linear infinite;
}

说明：

在此修改后的代码中，我们定义动画属性以包含“旋转”和“缩放”动画，并用逗号。旋转动画每2秒循环一次，而缩放动画每4秒循环一次。

通过将多个不同速度的动画合并在一个动画属性中，可以达到以下效果：让旋转和生长动画以各自的速度同时播放。

以上是如何同时触发多个不同速度的CSS动画？的详细内容。更多信息请关注PHP中文网其他相关文章！