Comment puis-je déclencher simultanément plusieurs animations CSS avec des vitesses différentes ?

Déclenchement simultané de plusieurs animations CSS avec des vitesses variables

Dans votre exemple, vous visiez à déclencher simultanément deux animations CSS impliquant des effets de rotation et d'échelle. Cependant, vous avez rencontré un problème où seule cette dernière animation était jouée.

Pour résoudre ce problème, la solution appropriée consiste à utiliser des virgules pour spécifier plusieurs animations au sein d'une seule propriété d'animation. Chaque animation peut avoir son propre ensemble de propriétés, notamment la durée et la vitesse.

Exemple modifié :

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

Explication :

Dans ce code modifié, nous définissons la propriété d'animation pour inclure à la fois les animations "spin" et "scale", séparées par une virgule. L'animation de rotation terminera son cycle toutes les 2 secondes, tandis que l'animation d'échelle terminera son cycle toutes les 4 secondes.

En incorporant les multiples animations avec des vitesses différentes dans une seule propriété d'animation, vous pouvez obtenir l'effet souhaité de faire jouer simultanément les animations de rotation et de croissance à leurs vitesses respectives.

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!