Цепная анимация CSS не учитывает задержку - PullRequest
Новая
       32

Цепная анимация CSS не учитывает задержку

0 голосов
/ 20 марта 2020

Я создал две анимации, fadeIn и fadeOut. Я хочу, чтобы ряд изображений постепенно исчезал, а затем постепенно исчезали изображения сзади. Однако я хочу, чтобы это повторялось бесконечно, поэтому одно всегда будет исчезать, когда другие исчезают. 

.top-grid-container > div > picture {
    -webkit-animation-duration: 1s, 1s;
    animation-duration: 1s, 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite, infinite;
    animation-iteration-count: infinite, infinite;
    -webkit-animation-name: fadeOut, fadeIn;
    animation-name: fadeOut, fadeIn;
    -webkit-animation-delay: 4s, 8s;
    animation-delay: 4s, 8s;
    /* animation-timing-function: ease-in, ease-out; */
    width: 100%;
}

.top-grid-container > div > picture:nth-of-type(2) {
    -webkit-animation-name: fadeIn, fadeOut;
    animation-name: fadeIn, fadeOut;
    -webkit-animation-delay: 4s, 8s;
    animation-delay: 4s, 8s;
}

@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}
@keyframes fadeIn{0%{opacity:0}to{opacity:1}}

@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}
@keyframes fadeOut{0%{opacity:1}to{opacity:0}}
<div class="top-grid-container">
  <div class="top-Adrian-Mole">
    <picture>
      <source srcset="https://loremflickr.com/320/240/dog 1x, https://loremflickr.com/640/480/dog 2x, https://loremflickr.com/1280/480/dog 3x">
      <img src="https://loremflickr.com/320/240/dog" alt="Adrian Mole">
    </picture>
    <picture>
      <source srcset="https://loremflickr.com/320/240/london 1x, https://loremflickr.com/640/480/london 2x, https://loremflickr.com/1280/480/london 3x">
      <img src="https://loremflickr.com/320/240/london" alt="Adrian Mole">
    </picture>          
  </div>
</div>

Первоначально анимация начинается нормально, но после первой итерации задержка больше не учитывается и с этого момента она мгновенно повторяется.

Хорошо, теперь я обнаружил, что задержка не учитывается для итерации, а только для первого вызова. Поэтому я попытался «подделать это», используя следующий код. 

/* Animation */
.top-grid-container > div > picture {
    -webkit-animation-duration: 8s, 8s;
    animation-duration: 8s, 8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite, infinite;
    animation-iteration-count: infinite, infinite;
    -webkit-animation-name: fadeOut, fadeIn;
    animation-name: fadeOut, fadeIn;
    -webkit-animation-delay: 0, 0;
    animation-delay: 0, 0;
    /* animation-timing-function: ease-in, ease-out; */
    width: 100%;
}

.top-grid-container > div > picture:nth-of-type(2) {
    -webkit-animation-name: fadeIn, fadeOut;
    animation-name: fadeIn, fadeOut;
    -webkit-animation-delay: 0, 0;
    animation-delay: 0, 0;
    -webkit-animation-duration: 4s, 4s;
    animation-duration: 4s, 4s;
}


@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    25% {
        opacity: 1
    }
    50% {
        opacity: 1
    }
    75% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0
    }
    25% {
        opacity: 1
    }
    50% {
        opacity: 1
    }
    75% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }
    25% {
        opacity: 0
    }
    50% {
        opacity: 0
    }
    75% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1
    }
    25% {
        opacity: 0
    }
    50% {
        opacity: 0
    }
    75% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}
<div class="top-grid-container">
  <div class="top-Adrian-Mole">
    <picture>
      <source srcset="https://loremflickr.com/320/240/dog 1x, https://loremflickr.com/640/480/dog 2x, https://loremflickr.com/1280/480/dog 3x">
      <img src="https://loremflickr.com/320/240/dog" alt="Adrian Mole">
    </picture>
    <picture>
      <source srcset="https://loremflickr.com/320/240/london 1x, https://loremflickr.com/640/480/london 2x, https://loremflickr.com/1280/480/london 3x">
      <img src="https://loremflickr.com/320/240/london" alt="Adrian Mole">
    </picture>          
  </div>
</div>

Но в этом случае одно изображение исчезает и исчезает в другое время по сравнению с другим. Когда они располагаются друг на друге, это не очень хорошо c. Для меня код выглядит прямо противоположно, но в реальной жизни анимация совсем другая.

1 Ответ

2 голосов
/ 20 марта 2020

Свойство animation-delay обозначает задержку до начала анимации , а не задержку между каждой итерацией анимации .

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

.top-grid-container > div > picture {
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite, infinite;
    animation-iteration-count: infinite, infinite;
    -webkit-animation-name: fadeInAndOut;
    animation-name: fadeInAndOut;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    /* animation-timing-function: ease-in, ease-out; */
    width: 100%;
}

.top-grid-container > div > picture:nth-of-type(2) {
    -webkit-animation-name: fadeInAndOut;
    animation-name: fadeInAndOut;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

@-webkit-keyframes fadeInAndOut{0%{opacity:0} 40%{opacity:0} 50% {opacity:1} 90% {opacity:1} 100%{opacity:0}}
@keyframes fadeInAndOut{0%{opacity:0} 40%{opacity:0} 50% {opacity:1} 90% {opacity:1} 100%{opacity:0}}
<div class="top-grid-container">
  <div class="top-Adrian-Mole">
    <picture>
      <source srcset="https://loremflickr.com/320/240/dog 1x, https://loremflickr.com/640/480/dog 2x, https://loremflickr.com/1280/480/dog 3x">
      <img src="https://loremflickr.com/320/240/dog" alt="Adrian Mole">
    </picture>
    <picture>
      <source srcset="https://loremflickr.com/320/240/london 1x, https://loremflickr.com/640/480/london 2x, https://loremflickr.com/1280/480/london 3x">
      <img src="https://loremflickr.com/320/240/london" alt="Adrian Mole">
    </picture>          
  </div>
</div>
...