关键帧动画从最后一张跳到第一张，而不是淡入淡出

Question

我继承了一个旧网站来照顾，并被要求使用Twitter提要和图像滑块对其进行现代化改造。

一个问题。

我的滑块工作正常，除了它从最后一张图像跳到第一张图像而不是淡入淡出。有人知道我要去哪里了吗？

我认为这与计时或不透明有关，但是，我花了很长时间尝试解决它！还是应该尝试FadeInOut等？

CSS:

.slider {
max-width: 508px;
height: 318px;
margin: 2px auto;
position: relative;
}

.slide1,.slide2,.slide3,.slide4,.slide5,.slide6 {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 1px;
}

.slide1 {background: url("images/B18A4640.jpg") no-repeat center;
  background-size: cover;
animation:fade 46s infinite;
} 


.slide2 {
background: url("images/B18A4669.jpg") no-repeat center;
  background-size: cover;
animation:fade2 46s infinite;
}


.slide3 {
background: url("images/harriet1.jpg") no-repeat center;
  background-size: cover;
animation:fade3 46s infinite;
}


.slide4 {
background: url("images/B18A4634.jpg") no-repeat center;
  background-size: cover;
animation:fade4 46s infinite;
}


.slide5 {
background: url("images/P1080449.jpg") no-repeat center;
  background-size: cover;
animation:fade5 46s infinite;
}


.slide6 {
background: url("images/harriet2.jpg") no-repeat center;
  background-size: cover;
animation:fade6 46s infinite;
}


@keyframes fade
{
0%   {opacity:1}
20% {opacity: 0}
40% { opacity: 0}
60% { opacity: 0}
80% { opacity: 0}
100% { opacity: 0}
}

@keyframes fade2
{
0%   {opacity:0}
20% {opacity: 1}
40% { opacity: 0}
60% { opacity: 0}
80% { opacity: 0}
100% { opacity: 0}
}

@keyframes fade3
{
0%   {opacity:0}
20% {opacity: 0}
40% { opacity: 1}
60% { opacity: 0}
80% { opacity: 0}
100% { opacity: 0}
}

@keyframes fade4
{
0%   {opacity:0}
20% {opacity: 0}
40% { opacity: 0}
60% { opacity: 1}
80% { opacity: 0}
100% { opacity: 0}
}

@keyframes fade5
{
0%   {opacity:0}
20% {opacity: 0}
40% { opacity: 0}
60% { opacity: 0}
80% { opacity: 1}
100% { opacity: 0}
}

@keyframes fade6
{
0%   {opacity:0}
20% {opacity: 0}
40% { opacity: 0}
60% { opacity: 0}
80% { opacity: 0}
100% { opacity: 1}
}

这是Website

html：

<link href="slider.css" rel="stylesheet" type="text/css" />

<div class='slider'>
<div class='slide1'></div>
<div class='slide2'></div>
<div class='slide3'></div>
<div class='slide4'></div>
<div class='slide5'></div>
<div class='slide6'></div>
</div>

破解！

    .slider {
    max-width: 508px;
    height: 318px;
    margin: 2px auto;
    position: relative;
    }
    .slide1,.slide2,.slide3,.slide4,.slide5,.slide6 {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 1px;
    }
    .slide1 {
    background: url("images/B18A4640.jpg") no-repeat center;
    background-size: cover;
    animation:fade 46s infinite;
    -webkit-animation:fade 46s infinite;
    } 


    .slide2 {
    background: url("images/B18A4669.jpg") no-repeat center;
    background-size: cover;
    animation:fade2 46s infinite;
    -webkit-animation:fade2 46s infinite;

    }


    .slide3 {
    background: url("images/harriet1.jpg") no-repeat center;
    background-size: cover;
    animation:fade3 46s infinite;
    -webkit-animation:fade3 46s infinite;

    }


    .slide4 {
    background: url("images/B18A4634.jpg") no-repeat center;
    background-size: cover;
    animation:fade4 46s infinite;
    -webkit-animation:fade4 46s infinite;

    }


    .slide5 {
    background: url("images/P1080449.jpg") no-repeat center;
    background-size: cover;
    animation:fade5 46s infinite;
    -webkit-animation:fade5 46s infinite;

    }


    .slide6 {
    background: url("images/harriet2.jpg") no-repeat center;
    background-size: cover;
    animation:fade6 46s infinite;
    -webkit-animation:fade6 46s infinite;

    }


    @keyframes fade
    {
    0%   {opacity:1}
    15% {opacity: 0}
    30% { opacity: 0}
    45% { opacity: 0}
    60% { opacity: 0}
    75% { opacity: 0}
    100% { opacity: 1}
    }

    @keyframes fade2
    {
    0%   {opacity:0}
    15% {opacity: 1}
    30% { opacity: 0}
    45% { opacity: 0}
    60% { opacity: 0}
    75% { opacity: 0}
    100% { opacity: 0}
    }

    @keyframes fade3
    {
    0%   {opacity:0}
    15% {opacity: 0}
    30% { opacity: 1}
    45% { opacity: 0}
    60% { opacity: 0}
    75% { opacity: 0}  
    100% { opacity: 0}
    }

    @keyframes fade4
    {
    0%   {opacity:0}
    15% {opacity: 0}
    30% { opacity: 0}
    45% { opacity: 1}
    60% { opacity: 0}
    75% { opacity: 0}
    100% { opacity: 0}
    }

    @keyframes fade5
    {
    0%   {opacity:0}
    15% {opacity: 0}
    30% { opacity: 0}
    45% { opacity: 0}
    60% { opacity: 1}
    75% { opacity: 0}
    100% { opacity: 0}
    }

    @keyframes fade6
    {
    0%   {opacity:0}
    15% {opacity: 0}
    30% { opacity: 0}
    45% { opacity: 0}
    60% { opacity: 0}
    75% { opacity: 1}
    100% { opacity: 0}
    }

不明白为什么我需要在第一张幻灯片的100％点处设置“ opacity = 1”，或者是否需要“ -webkit-animation-fade：因为在工作时需要一些位，除非没有它就跳了”