Comment puis-je lire plusieurs animations CSS simultanément à différentes vitesses ?

Jouer plusieurs animations CSS simultanément avec des vitesses variables

Le code donné ne parvient pas à exécuter plusieurs animations CSS simultanément en raison d'une syntaxe incorrecte. Pour animer un élément avec plusieurs animations, chaque animation doit être déclarée séparément dans la propriété animation, séparée par des virgules.

Pour obtenir l'effet souhaité de rotation et de mise à l'échelle d'un élément de manière asynchrone :

1. Déclarez la propriété d'animation :

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

2. Définissez l'animation de rotation pour rotation :

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

3. Définir l'animation à l'échelle pour la croissance :

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

Le code modifié permet aux deux animations de jouer simultanément, obtenir l'effet souhaité de rotation et de croissance de l'élément à différentes vitesses.

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!