Блог

Главная - Вопросы по программированию - Как выполнить кроссфейдинг нескольких изображений

Как выполнить кроссфейдинг нескольких изображений

#html #css

#HTML #css

Вопрос:

Я пытаюсь использовать «nth-of-type», но по какой-то причине воспроизводится только одно изображение, а затем все они исчезают, затем оно возвращается к исходному изображению. Таким образом, даже третье изображение не появляется. Я нашел этот способ в другом сообщении здесь, где говорилось, что делать это таким образом лучше, чем использовать «альтернативный» в каждом изображении, но я не знаю, правильно ли это, потому что это происходит не последовательно. Затухает только до второго изображения, затем возвращается к исходному.

HTML и CSS:

 @keyframes cf4FadeInOut {
0% {
  opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

.App img {
  -webkit-animation-name: cf4FadeInOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 8s;


-moz-animation-name: cf4FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 8s;

-o-animation-name: cf4FadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 8s;

animation-name: cf4FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
}



.App img:nth-of-type(1) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  animation-delay: 6s;
}
.App img:nth-of-type(2) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  animation-delay: 6s;
}
.App img:nth-of-type(3) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  animation-delay: 6s;
}
.App img:nth-of-type(4) {
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
} 
 <div class="App">
  <img src="img/4.png" class="image4">
  <img src="img/3.png" class="image3">
  <img src="img/2.png" class="image2">
  <img src="img/1.png" class="image1">
</div>

Ответ №1:

лучше всего установить непрозрачность около 50%, вот пример с увеличенной продолжительностью :

 @keyframes cf4FadeInOut {
 
  40%,
  60% {
    opacity: 0;
  }
}

.App {
  display: grid;
  width: max-content;
  margin: auto;
}

.App img {
  grid-row: 1;
  grid-column: 1;
  animation-name: cf4FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 20s;
}

.App img:nth-of-type(1) {
  animation-delay: -15s;
}

.App img:nth-of-type(2) {
  animation-delay: -10s;
}

.App img:nth-of-type(3) {
  animation-delay: -5s;
}

.App img:nth-of-type(4) {
  animation-delay: 0s;
} 
 <div class="App">
  <img src="https://picsum.photos/id/1011/300/200" class="image4">
  <img src="https://picsum.photos/id/1016/300/200" class="image3">
  <img src="https://picsum.photos/id/1019/300/200" class="image2">
  <img src="https://picsum.photos/id/1018/300/200" class="image1">
</div>

больше не нужно всех этих префиксов, кстати;)

Отрицательная задержка, сразу же устанавливается на анимацию, не дожидаясь завершения первого цикла.

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

 p {
  background: repeating-linear-gradient(to right, transparent 0 2em, lightgray 2em 4em);
  width: 20em;
}

b {
  display: block;
  background: white;
}

span {
  margin-left: var(--offSetLeft, 0);/* would be the delay moving it on the time line */
  text-align: center;
  color: white;
  padding: 1em;
  box-sizing: border-box;
  display: block;
  background: linear-gradient(to right, transparent, blue 40% 60%, transparent);
  width: 20em;/* would be visually the duration */
} 
 <p><b>Animation delay</b>
  <span style="--offSetLeft:-6em;">img 1</span>
  <span style="--offSetLeft:-2em;">img 2</span>
  <span style="--offSetLeft: 2em;">img 3</span>
  <span style="--offSetLeft: 6em;">img 4</span>
</p>

Комментарии:

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

2. вам нужно задержать анимацию, если у вас 5 изображений на 10 секунд, тогда потребуется задержка в 2 секунды, но она будет очень короткой, поэтому вам также нужно увеличить продолжительность . Если вы хотите длительность 2 секунды, с 5 изображениями, это будет 5×2 = 10 секунд с непрозрачностью, установленной на 50%, вам нужно удвоить продолжительность . Без задержки все они будут исчезать одновременно.

3. Витор, я не думаю, что ты хочешь одинаковую задержку для всех изображений — ты хочешь, чтобы одно запустилось и немного поработало, затем другое исчезло, а затем еще одно.

4. Я не знаю, правильно ли я выразился, но в основном это так: изображение 1: появляется на 5 секунд, исчезает до изображения 2, изображение 2: появляется на 5 секунд, исчезает до следующего.. Доступ к веб-сайту Instagram на анонимной вкладке, они сделали это по телефону: instagram.com

5. как объяснялось, если вам нужно 5 секунд для каждого изображения, вам нужно увеличить всю продолжительность и умножить 5s на количество изображений x 2 (непрозрачность: 0 в половине случаев), затем откладывать каждую анимацию изображения от предыдущей. (моя связь сумасшедшая)

Метки: