Анимация ключевого кадра, переход от последнего к первому изображению вместо исчезновения - PullRequest
Новая
       10

Анимация ключевого кадра, переход от последнего к первому изображению вместо исчезновения

0 голосов
/ 31 августа 2018

Я унаследовал старый сайт, чтобы за ним присматривать, и меня попросили немного его модернизировать с помощью твиттера и слайдера изображений.

Вопрос.

Мой слайдер работает отлично, за исключением того, что он переходит с последнего изображения на первое, а не исчезает. Кто-нибудь понял, где я иду не так?

Полагаю, это как-то связано с таймингами или непрозрачностью, но я потратил целую вечность, пытаясь это исправить! Или я должен попробовать 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}
}

Это Сайт

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

Не понимаю, зачем мне нужно "opacity = 1" в точке 100% для первого слайда, или если "-webkit-animation-fade: биты необходимы, поскольку он работал, за исключением прыжка без него .

...