Comment déclencher simultanément plusieurs animations CSS à différentes vitesses ?

Comment déclencher plusieurs animations CSS simultanément à des vitesses variables

Question :

Comment puis-je lancer deux animations CSS distinctes simultanément, en veillant à ce qu'ils fonctionnent à des vitesses différentes ?

Par exemple, je souhaite qu'une image pivote et se redimensionne simultanément, avec un cycle de rotation toutes les 2 secondes et un cycle de mise à l'échelle toutes les 4 secondes.

Exemple de code :

.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);
    }
}

Une tentative précédente utilisant ce code n'a abouti qu'à une seule animation en train de jouer (cette dernière).

Réponse :

Pour lire plusieurs animations avec des propriétés différentes, concaténez-les avec une virgule.

Exemple mis à jour :

.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;
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!