How Can I Play Multiple CSS Animations Simultaneously at Different Speeds?

Playing Multiple CSS Animations Simultaneously with Varying Speeds

The given code fails to execute multiple CSS animations concurrently due to improper syntax. To animate an element with multiple animations, each animation should be declared separately within the animation property, separated by commas.

To achieve the desired effect of rotating and scaling an element asynchronously:

1. Declare the animation property:

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

2. Define the spin animation for rotation:

   @-webkit-keyframes spin { 
    100% { 
        transform: rotate(180deg);
    } 
   }

3. Define the scale animation for growth:

   @-webkit-keyframes scale {
    100% {
        transform: scaleX(2) scaleY(2);
    }
   }

The modified code allows for both animations to play simultaneously, achieving the desired effect of rotating and growing the element at different speeds.

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