Maison >interface Web >tutoriel CSS >Comment puis-je déclencher simultanément plusieurs animations CSS ?
Lorsqu'il s'agit d'animations CSS, il est souvent souhaitable d'exécuter plusieurs animations simultanément. Ceci peut être réalisé en exploitant la propriété d'animation.
Pour déclencher deux animations simultanément, on peut utiliser une liste séparée par des virgules dans la déclaration d'animation, comme indiqué ci-dessous :
animation: rotate 1s, spin 3s;
Dans ce cas, les animations de rotation et de rotation seront toutes deux appliquées à l'élément spécifié. Chaque animation conservera ses propriétés prédéfinies, telles que la durée et la fonction de synchronisation.
Pour illustrer ce concept, considérons l'exemple de code suivant :
.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; } @-webkit-keyframes spin { 100% { transform: rotate(180deg); } } @-webkit-keyframes scale { 100% { transform: scaleX(2) scaleY(2); } }
Ici, plusieurs animations sont définies dans la propriété -webkit-animation à l'aide de virgules. L'animation de rotation fera pivoter l'image toutes les 2 secondes, tandis que l'animation d'échelle doublera sa taille toutes les 4 secondes.
Pour voir cet effet en action, reportez-vous à l'URL suivante : http://jsfiddle.net/Ugc5g/3392/
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!