Comment puis-je déclencher simultanément plusieurs animations CSS ?

Déclenchement simultané de 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.

Structure du code

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.

Implémentation de la démonstration

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.

Démonstration en direct

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!