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

CSS3关键帧轻松进入框然后缓出

1 个答案: