暫停css3關鍵幀動畫

我有兩種模式。我想顯示它們以該順序在圖案暫停css3關鍵幀動畫

1）褪色1
2）在圖案褪色2
3）淡出模式1
4）淡出圖案2

，然後重複無限期。

我有這個，這顯示了正確的順序，但不會暫停模式，而其他變淡英寸

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

是否有可能引入一個暫停？

來源

2016-07-13 user1059511

是的，檢查出[動畫播放狀態（https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state） – TylerH

另外這個問題有一個解決方法，如果你需要瀏覽器的支持超出'動畫播放狀態'的作品：http://stackoverflow.com/questions/11689802/pause-between-keyframe-animations – TylerH

我確實需要IE9的支持 – user1059511

你想要達到這樣的目的嗎？

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

來源

2016-07-13 13:41:12

非常接近，但應該沒有點，兩種模式都不可見 – user1059511

編輯一點點，爲更多的期望時機嘗試玩百分數和值。注意：爲了方便起見，動畫必須在0％處具有相同的不透明度值 –

暫停css3關鍵幀動畫

回答

相關問題