CSS3關鍵幀易化盒，然後緩解

Question

我看看CSS3關鍵幀，並希望有一個框緩解，然後簡化了指定的迭代計數，這是我迄今爲止它緩解然後消失，然後再次緩解。 我希望盒子能夠緩解，然後緩解。 See my fiddle。我需要做些什麼才能做到這一點？

<div id="content"> 
    <span class="aniamte"></span> 
</div> 

@keyframes reset { 
    0% { opacity: 0; } 
    100% { opacity: 0; } 
} 
@keyframes fade-in { 
    0% { opacity: 0; } 
    60% { opacity: 0; } 
    100% { opacity: 1; } 
} 
.aniamte { 
    background: red; 
    display: inline-block; 
    height: 100px; 
    width: 100px; 
    animation-name: reset, fade-in; 
    animation-duration: 3s; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: 5; 
    animation-delay: 0, 1s;  
} 

Answer 1

我相信你在找animation-direction:alternate，但你的問題不是很清楚。這將使你的元素使用來自0%的關鍵幀100%指定的時間，然後從100%去0%第一次迭代完成後

@keyframes fade-in { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 
.animate { 
    background: red; 
    display: inline-block; 
    height: 100px; 
    width: 100px; 
    animation-name: fade-in; 
    animation-duration: 3s; 
    animation-timing-function: ease-in-out; 
    animation-direction:alternate; 
    animation-iteration-count: 5; 
} 

Demo