CSS3关键帧缓入框然后缓出

【问题标题】：CSS3 keyframes ease-in box then ease-outCSS3关键帧缓入框然后缓出
【发布时间】：2014-01-10 07:51:05
【问题描述】：

我正在查看 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;    
}

【问题讨论】：

标签： css css-animations keyframe

【解决方案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

【讨论】：