CSS анимация: превращение изображений друг в друга, анимация изображения и его направление - PullRequest
Новая
       16

CSS анимация: превращение изображений друг в друга, анимация изображения и его направление

0 голосов
/ 25 апреля 2018

Я работаю над клонированием сайта AirBnB для практики работы с React. Я пытаюсь скопировать веб-сайт jumbotron и его функциональность.

На сайте AirBnB изображения jumbotron переходят друг в друга. Изображения также медленно всплывают вверх, пока они отображаются. У меня проблемы с подражанием.

Я пытаюсь использовать ключевой кадр CSS следующим образом: 

    @keyframes fader {
  0% {
    background: url('./components/layout/images/jumbo1.jpg');
    background-size: cover;
  }
  16.67% {
    background: url('./components/layout/images/jumbo2.jpg');
    background-size: cover;
  }
  33.34% {
    background: url('./components/layout/images/jumbo3.jpg');
    background-size: cover;
  }
  50.01% {
    background: url('./components/layout/images/jumbo4.jpg');
    background-size: cover;
  }
  66.68% {
    background: url('./components/layout/images/jumbo5.jpg');
    background-size: cover;
  }
  83.35% {
    background: url('./components/layout/images/jumbo1.jpg');
    background-size: cover;
  }
  100% {
    background: url('./components/layout/images/jumbo2.jpg');
    background-size: cover;
  }
}



.wrapper {
  max-width: 100%;
  margin-top: 5em;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5em;
}

.gallery {
  max-width: 100%;
  margin: 0 auto;
  animation: fader 30s linear infinite;
  height: 500px;
}

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

Как я могу это сделать? Могу ли я применить более одного ключевого кадра к одному элементу? Здесь - это CodeSandbox, если это помогает.

1 Ответ

0 голосов
/ 25 июля 2018

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

 @keyframes fadeinout {
    0%   { opacity:1; }
    17%  { opacity:1; }
    25%  { opacity:0; }
    92%  { opacity:0; }
    100% { opacity:1; }
}

Я заметил, что заголовок этого вопроса «замирание изображений друг в друге», если вы имеете в виду, что одно изображение меняется на другое (в CSS мы подразумеваем, что этот набор изображений будет «наверху друг друга» в положении: absolute ;, вам нужно установить селектор: nth-of-type (n), чтобы задержать анимацию для дочерних элементов. Поэтому, если у вас есть набор из 3 изображений, которые вы хотите исчезнуть, вы должны использовать следующее. 

#slideshow img:nth-of-type(1) {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    animation-delay: 6s;
}
#slideshow img:nth-of-type(2) {
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    -o-animation-delay: 4s;
    animation-delay: 4s;
}
#slideshow img:nth-of-type(3) {
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    animation-delay: 2s;
}
...