Цикл анимации ключевых кадров CSS - PullRequest
Новая
       7

Цикл анимации ключевых кадров CSS

0 голосов
/ 28 мая 2018

Я создаю анимацию ключевого кадра css, в которой изображение будет вставляться, парковаться в течение минуты, а затем выдвигаться, когда вставляется следующее изображение, и это будет выполняться в «бесконечном» цикле (до тех пор, покаесть класс animate для родительского элемента, который переключается с помощью js при прокрутке).

Что у меня есть (https://jsfiddle.net/WhiskeyT/Lurkf4f6/) представляет две проблемы:

Первыйтребуемые временные интервалы казались простыми - общая продолжительность анимации 3 секунды, длительности анимации для изображений 1, 2 и 3 равны 0, 3, 6, - но между выходящим изображением и входящим изображением наблюдается небольшая задержка или разрыв, и мне бы очень хотелось, чтобы это было ужесточено. Несмотря на долгие настройки, я не могу настроить ключевые кадры так, чтобы они были ближе к моей цели.

Второй вопрос более существенный и очевидный: 3 изображенияanimate, и поскольку анимация повторяется, загружается только 3-е изображение.

Любая помощь приветствуется.

Whisky T. 

<div class="slide" id="slide-02">
    <div class="image-rotator">
        <img src="img1.jpg" alt="img" />
        <img src="img2.jpg" alt="img" />
        <img src="img3.jpg" alt="img" />
    </div>
</div><!-- #slide-02 -->


.slide {
    width: 100%;
    height: 100vh;
    position: relative;
}


#slide-02 .image-rotator {
    position: relative;
    width: 50%;
    max-width: 450px;
    height: 100%;
    overflow: hidden;
}

#slide-02.animate .image-rotator img {
    position: absolute;
    top: 0;
    left: -450px; // I remain confused as to how init rule collides w/0% keyframe ;(
    width: 100%;
    height: 100%;
}

#slide-02.animate .image-rotator img:nth-child(1) { animation: imgRotator 3s ease-in-out infinite 0s; }
#slide-02.animate .image-rotator img:nth-child(2) { animation: imgRotator 3s ease-in-out infinite 3s; }
#slide-02.animate .image-rotator img:nth-child(3) { animation: imgRotator 3s ease-in-out infinite 6s; }

@keyframes imgRotator {
    0% {
        opacity: 0;
        left: 450px;
    }
    15%, 84% {
        opacity: 1;
        left: 0;
    }
    100% {
        opacity: 0;
        left: -450px;
    }
}

Ответы [ 2 ]

0 голосов
/ 28 мая 2018

Ваша проблема в основном с ключевыми кадрами.

Поскольку у вас 3 ребенка, базовый промежуток времени составляет 1/3 = 33%.

Этот промежуток времени должен быть разделенв 2 шага, один движется, а другой все еще.первое и второе должны составить 33. Я установил 17 для шага перемещения, но это на ваше усмотрение.

Результат: 

.slide {
   width: 100%;
   height: 80vh;
   position: relative;
}

#slide-02 .image-rotator {
   position: relative;
   max-width: 300px;
   height: 100%;
   overflow: hidden;
   border: 1px solid lime;
}

#slide-02.animate .image-rotator img {
   position: absolute;
   top: 0;
   left: -450px;
   width: 100%;
   height: 100%;
   overflow: hidden;
   border-radius: 3px;
   animation: imgRotator 9s ease-in-out infinite;
}


#slide-02.animate .image-rotator img:nth-child(2) {
   animation-delay: -3s;
}

#slide-02.animate .image-rotator img:nth-child(3) {
   animation-delay: -6s;
}

@keyframes imgRotator {
   0% {
      opacity: 0;
      left: 450px;
   }
   17%, 33%{
      opacity: 1;
      left: 0;
   }
   50%, 100% {    /* 33 + 17 = 50 */
      opacity: 0;
      left: -450px;
   }
}
<div class="slide animate" id="slide-02">
   <div class="image-rotator">
      <img src="https://s22.postimg.cc/7hgn7691t/pexels-photo-39803.jpg" alt="apple" >
      <img src="https://s22.postimg.cc/d5mxy25oh/bananas-fruit-carbohydrates-sweet-38283.jpg" alt="bananas" >
      <img src="https://s22.postimg.cc/hrj26ejht/pexels-photo-109274.jpg" alt="cherries" >
   </div>
</div>
0 голосов
/ 28 мая 2018

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

Вы можете уменьшить непрозрачность, и вы четко увидите, что происходит: 

.slide {
   width: 100%;
   height: 80vh;
   position: relative;
}

#slide-02 .image-rotator {
   position: relative;
   max-width: 300px;
   height: 100%;
   overflow: hidden;
   border: 1px solid lime;
}

#slide-02.animate .image-rotator img {
   position: absolute;
   top: 0;
   left: -450px;
   width: 100%;
   height: 100%;
   overflow: hidden;
   border-radius: 3px;
}

#slide-02.animate .image-rotator img:nth-child(1) {
   animation: imgRotator 3s ease-in-out infinite 0s;
}

#slide-02.animate .image-rotator img:nth-child(2) {
   animation: imgRotator 3s ease-in-out infinite 3s;
}

#slide-02.animate .image-rotator img:nth-child(3) {
   animation: imgRotator 3s ease-in-out infinite 6s;
}

@keyframes imgRotator {
   0% {
      opacity: 0;
      left: 450px;
   }
   15%,
   84% {
      opacity:0.8;
      left: 0;
   }
   100% {
      opacity: 0;
      left: -450px;
   }
}
<div class="slide animate" id="slide-02">
   <div class="image-rotator">
      <img src="https://s22.postimg.cc/7hgn7691t/pexels-photo-39803.jpg" alt="apple" />
      <img src="https://s22.postimg.cc/d5mxy25oh/bananas-fruit-carbohydrates-sweet-38283.jpg" alt="bananas" />
      <img src="https://s22.postimg.cc/hrj26ejht/pexels-photo-109274.jpg" alt="cherries" />
   </div>
</div>
<!-- #slide-02 -->

Чтобы исправить это, вы можете настроить анимацию и задержки следующим образом: 

.slide {
   width: 100%;
   height: 80vh;
   position: relative;
}

#slide-02 .image-rotator {
   position: relative;
   max-width: 300px;
   height: 100%;
   overflow: hidden;
   border: 1px solid lime;
}

#slide-02.animate .image-rotator img {
   position: absolute;
   top: 0;
   left: -450px;
   width: 100%;
   height: 100%;
   overflow: hidden;
   border-radius: 3px;
}

#slide-02.animate .image-rotator img:nth-child(1) {
   animation: imgRotator 3s ease-in-out infinite 0s;
}

#slide-02.animate .image-rotator img:nth-child(2) {
   animation: imgRotator 3s ease-in-out infinite 1s;
}

#slide-02.animate .image-rotator img:nth-child(3) {
   animation: imgRotator 3s ease-in-out infinite 2s;
}

@keyframes imgRotator {
   0% {
      opacity: 0;
      left: 450px;
   }
   50%{
      opacity: 1;
      left: 0;
   }
}
<div class="slide animate" id="slide-02">
   <div class="image-rotator">
      <img src="https://s22.postimg.cc/7hgn7691t/pexels-photo-39803.jpg" alt="apple" >
      <img src="https://s22.postimg.cc/d5mxy25oh/bananas-fruit-carbohydrates-sweet-38283.jpg" alt="bananas" >
      <img src="https://s22.postimg.cc/hrj26ejht/pexels-photo-109274.jpg" alt="cherries" >
   </div>
</div>
...