Comment puis-je créer efficacement des animations CSS échelonnées pour plusieurs éléments enfants ?

Animations CSS avec des délais échelonnés pour les éléments enfants

Vous souhaitez créer un effet en cascade où chaque élément enfant d'un élément s'anime avec un retard. Pour y parvenir, vous avez défini manuellement le délai d'animation pour chaque enfant individuellement, comme le montre votre extrait de code. Cependant, vous recherchez une solution plus efficace pour appliquer dynamiquement des délais en fonction du nombre d'éléments enfants.

Une solution CSS utilisant une boucle Sass for offre une approche concise et évolutive de ce problème :

@for $i from 1 through 10 {
    .myClass img:nth-child(#{$i}n) {
        animation-delay: #{$i * 0.5}s;
    }
}

Cette boucle itère de 1 à 10 (réglable pour s'adapter au nombre attendu d'éléments enfants) et attribue une valeur de retard calculée à chaque enfant en utilisant le nième enfant sélecteur. Le délai est calculé en multipliant l'index de l'enfant ($i) par une période de retard souhaitée (0,5 seconde dans cet exemple).

En utilisant cette boucle, vous pouvez appliquer des retards en cascade à n'importe quel nombre d'éléments enfants sans manuellement écrire des styles individuels. Cette solution élimine le besoin de spécifier explicitement des styles pour chaque enfant et garantit la cohérence entre tous les éléments.

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!