Эффект перехода для покрытия ширины и размера фона - PullRequest
Новая
       15

Эффект перехода для покрытия ширины и размера фона

0 голосов
/ 15 декабря 2018

Я хочу реализовать что-то вроде слайдера - два изображения, которые появляются через две секунды.У меня есть два абсолютных изображения положения, первое имеет 100% ширину и высоту, а второе имеет в начале 0% и 100% высоты.Через две секунды второе изображение начинает увеличиваться с ширины от 0 до 100% с переходом 3s.Поскольку у него есть фоновое положение покрытия - во время перехода фоновое изображение меняет (это можно увидеть в конце перехода) из-за разных соотношений.Это выглядит довольно уродливо, и я хочу предотвратить этот эффект завершения, когда изображение «увеличивается» в конце.

Codepen 

.parent {
  width: 100%;
  height: 500px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}

.s {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(https://icdn3.digitaltrends.com/image/2018-monterey-2019-bugatti-divo-5-1200x630-c-ar1.91.jpg);
  background-size: cover;
  transition: all 1s ease-in;
}
.s.act {
  /*left:50%;*/
}
.q {
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(https://www.economiadehoy.es/fotos/8/Ford_mustang_5.0_2017_3.jpg);
  background-size: cover;
  transition: all 3s;
}
.q.act {
  width: 100%;
}
...