Anhalten einer css3 Keyframe Animation

Ich habe zwei Muster. Ich würde sie in dieser Reihenfolge im Muster 1
2) verblassen in Muster 2
3)Anhalten einer css3 Keyframe Animation

1) verblassen mag zeigen fade out Muster 1
4) verblassen Muster 2

und dann wiederholen unbegrenzt.

ich das haben, was die richtige Reihenfolge zeigt, aber nicht das Muster unterbrechen, während die anderen Überblendungen in.

@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; 
}

Ist es möglich, eine Pause einzuführen?

Quelle

2016-07-13 user1059511

Ja, Check-out [animation-play-state] (https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state) – TylerH

Auch diese Frage hat eine Workaround, wenn Sie Browser-Unterstützung über was "Animation-play-state" funktioniert in benötigen: http://stackoverflow.com/questions/11689802/pause-between-keyframe-animations – TylerH

Ich brauche IE9-Unterstützung – user1059511

versuchen Sie, so etwas zu erreichen?

@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>

Quelle

2016-07-13 13:41:12

sehr nah, aber es sollte keinen Punkt geben, wo beide Muster nicht sichtbar sind – user1059511

bearbeitet wenig, für mehr gewünschte Timing versuchen, spielen mit Prozent und Werten. HINWEIS: Die Animation muss einen Deckkraftwert von 0% haben, wie bei 100% –

Antwort

Verwandte Themen