CSS3 keyframes ease-in box then ease-out

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