How to Simultaneously Trigger Multiple CSS Animations at Different Speeds?

How to Trigger Multiple CSS Animations Simultaneously with Varying Speeds

Question:

How can I initiate two distinct CSS animations concurrently, ensuring they operate at different speeds?

For instance, I want an image to rotate and scale simultaneously, with the rotation cycling every 2 seconds and the scaling cycling every 4 seconds.

Code Example:

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 2s linear infinite;
    -webkit-animation:scale 4s linear infinite;
}

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

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

A previous attempt using this code resulted in only one animation playing (the latter one).

Answer:

To play multiple animations with different properties, concatenate them with a comma.

Updated Example:

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 2s linear infinite, scale 4s linear infinite;
}

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