CSS3 анимация - плавная бесконечная анимация - PullRequest
Новая
       9

CSS3 анимация - плавная бесконечная анимация

4 голосов
/ 02 апреля 2019

Я сделал небольшую анимацию изображений, в которой изображения со временем меняют непрозрачность. Это работает плавно, но когда последнее изображение достигает 100%, оно переходит прямо к 0% без какого-либо перехода.

Я уже пробовал анимацию-направление: альтернатива для третьего изображения и задержка для всего изображения, но у меня это не работает. Задержка работает только на первом этапе цикла анимации, после того как задержка становится равной 0 для всех.

Вот мой CSS 

.rightside .img-container img.first {
  animation-name: first-image;
  animation-duration: 9s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  /* animation-delay: -10s; */
}

.rightside .img-container img.second {
  position: absolute;
  top: 0;
  animation-name: second-image;
  animation-duration: 9s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

.rightside .img-container img.third {
  position: absolute;
  top: 0;
  animation-name: final-image;
  animation-duration: 9s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  /* animation-direction: alternate; */
}

@keyframes first-image {
  0% {
    opacity: 0;
  }
  33.3% {
    opacity: 1;
  }
  67% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes second-image {
  0% {
    opacity: 0;
  }
  33.3% {
    opacity: 0;
  }
  67% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes final-image {
  0% {
    opacity: 0;
  }
  33.3% {
    opacity: 0;
  }
  67% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

HTML 

        <div class="img-container">
          <img src="Images/Apple.png" class="first turn" alt="Image Here" />
          <img src="Images/Bee.png" class="second" alt="Image Here" />
          <img src="Images/Cat.png" class="third" alt="Image Here" />
        </div>

1 Ответ

2 голосов
/ 02 апреля 2019

Классический подход к этому будет просто использовать различные задержки: 

div {
  animation-name: all;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  width: 100px;
  height: 100px;
  background-color: yellow;
}

.first {
  animation-delay: -3s;
  background-color: lightgreen;
}
.third {
  animation-delay: -6s;
  background-color: lightblue;
}


@keyframes all {
  0% {
    opacity: 0;
  }
  33.3% {
    opacity: 1;
  }
  67% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
...