Первый img bannermover не следует непосредственно после последнего img bannermove - PullRequest
Новая
       7

Первый img bannermover не следует непосредственно после последнего img bannermove

0 голосов
/ 02 сентября 2018

Я использую следующий код для создания баннеров: 

.photobanner {
  height: 233px;
  width: 3550px;
  margin-bottom: 5px;
  font-size: 0;
}

.photobanner img {
  margin-bottom: 10px;
  margin-right: 5px;
  height: 233px;
  width: 350px;
}

.photobanner img {
  transition: all 0.5s ease;
}

.first {
  animation: bannermove 30s linear infinite;
}

@keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2130px;
  }
}
<div class="photobanner">
  <img class="first" src="http://placehold.it/350x150">
  <img src="http://placehold.it/450x150">
  <img src="http://placehold.it/550x150">
  <img src="http://placehold.it/650x150">
  <img src="http://placehold.it/750x150">
</div>

Вы также можете найти код в jsfiddle здесь .
Пока все это прекрасно работает.

Однако, сейчас, когда анимация достигает последней img 750x150, она продолжает анимацию, пока это изображение не покинет экран. Тем не менее, я хочу, чтобы после img 750x150 первый img 350x150 появлялся без разрывов или пустого места в анимации.

Что мне нужно изменить в моем коде, чтобы добиться этого?

1 Ответ

0 голосов
/ 02 сентября 2018

Полагаю, вы хотите этот учебник. Ключевое предложение:

Нам нужно, чтобы наш первый кадр идеально соответствовал нашему последнему кадру

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

.photobanner {
  height: 233px;
  width: 3550px;
  margin-bottom: 5px;
  font-size: 0;
}

.photobanner img {
  margin-bottom: 10px;
  margin-right: 5px;
  height: 233px;
  width: 350px;
}

.photobanner img {
  transition: all 0.5s ease;
}

.first {
  animation: bannermove 10s linear infinite;
}

@keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -1775px;
  }
}
<div class="photobanner">
  <img class="first" src="http://placehold.it/350x150">
  <img src="http://placehold.it/450x150">
  <img src="http://placehold.it/550x150">
  <img src="http://placehold.it/650x150">
  <img src="http://placehold.it/750x150">
  
  <img src="http://placehold.it/350x150">
  <img src="http://placehold.it/450x150">
  <img src="http://placehold.it/550x150">
  <img src="http://placehold.it/650x150">
</div>
...