css - slider 中的缓动动画

Question

我正在尝试更好地理解动画。老实说，无论我阅读了多少教程，我都没有真正得到关键帧。因此，作为尝试和学习的实验，我尝试制作一个简单的盒子 slider ，它基本上在每一层中淡入淡出并重复。我希望能够逐层淡入，然后重复该过程。

这是我能得到的最接近的。

HTML

<div class="index"></div>
<div class="index"></div>
<div class="index"></div>
<div class="index"></div>
<div class="index"></div>

CSS

div {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
}
div:first-of-type {
    background: red;
    animation-delay: 0s;
    opacity: 1 !important;
}
div:nth-of-type(2) {
    background: green;
    animation-delay: 5s;
}
div:nth-of-type(3) {
    background: blue;
    animation-delay: 10s;
}
div:nth-of-type(4) {
    background: yellow;
    animation-delay: 15s;
}
div:last-of-type {
    background: orange;
    animation-delay: 20s;
}
.index {
    animation: index 5s ease-in infinite;
}
@keyframes index {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

我怎样才能达到我想要的效果？

fiddle :http://jsfiddle.net/s2rxujkt/1/

Answer 1

您可以添加第三个键:

@keyframes index {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

http://jsfiddle.net/s2rxujkt/2/