Suspension d'une animation d'image-clé css3

J'ai deux motifs. Je voudrais leur montrer dans cet ordreSuspension d'une animation d'image-clé css3

1) fondu dans le modèle 1
2) fondu dans le modèle 2
3) fade out pattern 1
4) fade out motif 2

puis répéter indéfiniment.

J'ai ce qui montre l'ordre correct, mais ne suspend pas le modèle, alors que les autres se fane dans.

@keyframes fadeIn { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 

@keyframes fadeOut { 
0% { opacity: 1; } 
100% { opacity: 0; } 
} 


.pattern-one { 
    animation: fadeIn 2s infinite alternate; 
} 

.pattern-two { 
    animation: fadeOut 2s infinite alternate; 
}

Est-il possible d'introduire une pause?

Source

2016-07-13 user1059511

Oui, consultez [animation-play-état] (https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state) – TylerH

Aussi cette question a une solution de contournement si vous avez besoin de support de navigateur au-delà de ce que 'animation-play-state' fonctionne: http://stackoverflow.com/questions/11689802/pause-between-keyframe-animations – TylerH

J'ai besoin de support IE9 – user1059511

Essayez-vous de réaliser quelque chose comme ça?

@keyframes fadeIn { 
 
    0% { opacity: 1; } 
 
    25% { opacity: 0; } 
 
    50% { opacity: 1; } 
 
    75% { opacity: 1; } 
 
    100% { opacity: 1; } 
 
} 
 

 
@keyframes fadeOut { 
 
    0% { opacity: 1; } 
 
    25% { opacity: 1; } 
 
    50% { opacity: 0; } 
 
    75% { opacity: 1; } 
 
    100% { opacity: 1; } 
 
} 
 

 

 
.pattern-one { 
 
    animation: fadeIn 4s infinite; 
 
} 
 

 
.pattern-two { 
 
    animation: fadeOut 4s infinite; 
 
} 
 
div{ 
 
    width:50px; 
 
    height:50px; 
 
    background-color: blue; 
 
    margin:10px; 
 
}

<div class="pattern-one"></div> 
 
<div class="pattern-two"></div>

Source

2016-07-13 13:41:12

très proche, mais il ne devrait y avoir aucun point où les deux modèles ne sont pas visibles – user1059511

peu modifié, pour plus de timing souhaité essayez de jouer avec des pourcentages et des valeurs. NOTE: l'animation doit avoir une valeur d'opacité de 0% même qu'à 100% pour la facilité –

Suspension d'une animation d'image-clé css3

Répondre

Questions connexes