Пространство между несколькими изображениями скользящего фона CSS анимации - PullRequest
Новая
       6

Пространство между несколькими изображениями скользящего фона CSS анимации

0 голосов
/ 08 октября 2019

Я пытаюсь создать CSS-анимированный фон, эффект скольжения повторяется в трех столбцах, каждый из которых использует несколько изображений. (См. Тест на https://codepen.io/sleepycg/pen/XWWJagK). Я вижу разрывы между отдельными изображениями, когда они скользят, и хотел бы их удалить. Это основано на коде, найденном в другом месте, который был ближайшим примером, который я мог найти для эффекта, который я ищуДолжен быть отзывчивым, таким образом, background-size: cover spec; также пытается центрировать каждое фоновое изображение в соответствующем контейнере при его отображении.

Было бы также любопытно, если бы анимация могла зацикливаться вместо сброса, новсе примеры, которые я видел, используют одно фоновое изображение. Я открыт для решения, которое использует это, если оно работает. 

<div class="hero-background">
    <div class="sliding-background one"></div>
    <div class="sliding-background two"></div>
    <div class="sliding-background three"></div>
</div>

.hero-background{
  display: flex;  
  flex-wrap: wrap;
}
.sliding-background {
  float:left;
  width:33.3%;
  overflow: hidden;
  background-size: cover;
  height: 800px;
  animation: slide-right 14s infinite ease;
  background-repeat: no-repeat;
}

.sliding-background.one {
  background-color: #f1f1f1; 
  background-image: 
  url("http://www.oclc.org/content/dam/oclc/annual-report/2019/bg_yellow1.png"),
  url("http://www.oclc.org/content/dam/oclc/annual-report/2019/bg_yellow2.png"),
  url("http://www.oclc.org/content/dam/oclc/annual-report/2019/bg_yellow3.png"),
  url("http://www.oclc.org/content/dam/oclc/annual-report/2019/bg_yellow4.png");
}
.sliding-background.two {
  background-color: #f1f1f1 ;
  background-image: 
  url("http://www.oclc.org/content/dam/oclc/annual-report/2019/bg_orange1.png"),
  url("http://www.oclc.org/content/dam/oclc/annual-report/2019/bg_orange2.png"),
  url("http://www.oclc.org/content/dam/oclc/annual-report/2019/bg_orange3.png"),
  url("http://www.oclc.org/content/dam/oclc/annual-report/2019/bg_orange4.png");
}
.sliding-background.three {
  background-color: #f1f1f1;
  background-image: 
  url("http://www.oclc.org/content/dam/oclc/annual-report/2019/bg_magenta1.png"),
  url("http://www.oclc.org/content/dam/oclc/annual-report/2019/bg_magenta2.png"),
  url("http://www.oclc.org/content/dam/oclc/annual-report/2019/bg_magenta3.png"),
  url("http://www.oclc.org/content/dam/oclc/annual-report/2019/bg_magenta4.png");
}

@keyframes slide-right{
  0%, 17% {
    background-position: 50% 0, 860px 0, 1720px 0, 2580px 0
  }
  25%, 42% {
    background-position: -860px 0, 50% 0, 860px 0, 1720px 0
  }
  50%, 67% {
    background-position: -1720px 0, -860px 0, 50% 0, 860px 0
  }
  75%, 100% {
    background-position: -2580px 0, -1720px 0, -860px 0, 50% 0
  }
}
...