séquence d'animation CSS3 ne fonctionne pas

Question

J'ai une simple animation CSS3 qui se fane dans et hors:

@keyframes pulse { 
    0% { 
     opacity: 0; 
    } 

    50% { 
     opacity: 1; 
    } 

    100% { 
     opacity: 0; 
    } 
} 

J'ai aussi trois travées avec ID que je veux fondre dans l'autre, que l'affichage d'une à la fois.

<h3> 
    <span id="first">First.</span> 
    <span id="second">Second.</span> 
    <span id="third">Third.</span> 
</h3> 

h3 { 
    position: relative; 
} 

h3 span { 
    position: absolute; 
    right: 0; 
    left: 0; 
    opacity: 0.025; 
} 

h3 span#first { 
    animation: pulse 5s infinite ease-in-out; 
} 

h3 span#second { 
    animation: pulse 5s infinite ease-in-out; 
    animation-delay: 5s; 
} 

h3 span#third { 
    animation: pulse 5s infinite ease-in-out; 
    animation-delay: 10s; 
} 

J'ai mis chaque animation de span durer 5 secondes, tandis que le deuxième et le troisième ont 5 et 10 secondes retards, respectivement, pour commencer une fois que l'avant a pris fin, mais ce n'est pas le résultat et les deuxième et troisième span s charge en même temps. Comment puis-je atteindre cet objectif?

Démo: CodePen

Merci à l'avance!

Answer 1

Vous devez définir le temps global tous les trois travées que le temps d'animation - 15 secondes, et ajuster les images clés en conséquence pour prendre ment un tiers du temps total d'opacité zéro à 1 et à 0 (5 secondes/33%):

@keyframes pulse { 
    0% { 
     opacity: 0; 
    } 
    16.67% { 
     opacity: 1; 
    } 
    33.33% { 
     opacity: 0; 
    } 
    100% { 
     opacity: 0; 
    } 
} 

h3 { 
    position: relative; 

    span { 
    position: absolute; 
    right: 0; 
    left: 0; 
    opacity: 0.025; 

    &#first { 
     animation: pulse 15s infinite ease-in-out; 
    } 

    &#second { 
     animation: pulse 15s infinite ease-in-out; 
     animation-delay: 5s; 
    } 

    &#third { 
     animation: pulse 15s infinite ease-in-out; 
     animation-delay: 10s; 
    } 
    } 
} 

Ici, il est dans un codepen: https://codepen.io/anon/pen/LzOraW

Answer 2

Vous ne devez pas faire le retard égal au temps de l'animation que le deuxième élément sera avoir la même animation que le premier élément après un itertation (5 s). Vous devez rendre le délai égal à la moitié du temps de l'animation. Voici un exemple avec seulement 2:

@keyframes pulse { 
 
    0% { 
 
     opacity: 0; 
 
    } 
 

 
    50% { 
 
     opacity: 1; 
 
    } 
 

 
    100% { 
 
     opacity: 0; 
 
    } 
 
} 
 

 
h3 { 
 
    position: relative; 
 
} 
 

 
h3 span { 
 
    position: absolute; 
 
    right: 0; 
 
    left: 0; 
 
    opacity: 0.025; 
 
} 
 

 
h3 span#first { 
 
    animation: pulse 5s infinite ease-in-out; 
 
} 
 

 
h3 span#second { 
 
    animation: pulse 5s infinite ease-in-out; 
 
    animation-delay: 2.5s; 
 
}

<h3> 
 
    <span id="first">First.</span> 
 
    <span id="second">Second.</span> 
 
</h3>

et 3, vous pouvez essayer ceci:

@keyframes pulse { 
 
    0% { 
 
     opacity: 0; 
 
    } 
 

 
    33% { 
 
     opacity: 1; 
 
    } 
 
    
 
    66% { 
 
     opacity: 0; 
 
    } 
 

 
    100% { 
 
     opacity: 0; 
 
    } 
 
} 
 

 
h3 { 
 
    position: relative; 
 
} 
 

 
h3 span { 
 
    position: absolute; 
 
    right: 0; 
 
    left: 0; 
 
    opacity: 0.025; 
 
} 
 

 
h3 span#first { 
 
    animation: pulse 6s infinite ease-in-out; 
 
} 
 

 
h3 span#second { 
 
    animation: pulse 6s infinite ease-in-out; 
 
    animation-delay: 2s; 
 
} 
 
h3 span#third { 
 
    animation: pulse 6s infinite ease-in-out; 
 
    animation-delay: 4s; 
 
}

<h3> 
 
    <span id="first">First.</span> 
 
    <span id="second">Second.</span> 
 
    <span id="third">Third.</span> 
 
</h3>