How Can I Simultaneously Trigger Multiple CSS Animations with Different Speeds?

Simultaneously Triggering Multiple CSS Animations with Varying Speeds

In your example, you aimed to concurrently trigger two CSS animations involving rotation and scale effects. However, you encountered an issue where only the latter animation played.

To address this, the proper solution is to utilize commas to specify multiple animations within a single animation property. Each animation can have its own set of properties, including duration and speed.

Modified Example:

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

Explanation:

In this modified code, we define the animation property to include both the "spin" and "scale" animations, separated by a comma. The spin animation will complete its cycle every 2 seconds, while the scale animation will complete its cycle every 4 seconds.

By incorporating the multiple animations with different speeds within a single animation property, you can achieve the desired effect of having both the rotation and growth animations play concurrently at their respective speeds.

The above is the detailed content of How Can I Simultaneously Trigger Multiple CSS Animations with Different Speeds?. For more information, please follow other related articles on the PHP Chinese website!