Question

我试图更好地理解动画。说实话，无论我阅读了多少教程，我都不会得到关键帧。因此，作为尝试和学习的实验，我尝试制作一个简单的盒子滑块，它基本上在每层中淡化并重复。我希望能够逐层淡化然后重复处理。

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

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;
    }
}

我如何达到理想的效果？

小提琴：http://jsfiddle.net/s2rxujkt/1/

Answer 1

您可以添加第三个键：

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

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

Answer 2

需要CSS z-index属性。但也有一点JS。这是一个很好的例子。 http://codepen.io/peterwestendorp/pen/LbiwD

通过JS，您只需应用'fx'类，然后通过CSS使用：

.fx:first-child + div ~ div  {
    z-index:-1;
}

同样好的一点是使用这样的动画：

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

希望它有所帮助。

在滑块中轻松动画

2 个答案: