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