暂停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关键帧动画

回答

相关问题