Как плавно сделать CSS анимацию без перерыва в конце - PullRequest
Новая
       14

Как плавно сделать CSS анимацию без перерыва в конце

0 голосов
/ 04 апреля 2019

Запустив приведенный ниже код, вы можете видеть, что через несколько секунд анимация прерывается, а не работает плавно. Я хочу, чтобы он работал непрерывно и плавно в той же ширине, что и я. Пожалуйста, помогите, здесь скрипка также 

.tech-slideshow {
  height: 200px;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.tech-slideshow > div {
  height: 200px;
  width: 126px;
  background: url(https://i.stack.imgur.com/IcC0b.png) repeat-x;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
  animation: moveSlideshow 8s linear infinite;
}
.tech-slideshow .mover-2 {
  opacity: 0;
  transition: opacity 0.5s ease-out;
  background-position: 0 -200px;
  animation: moveSlideshow 15s linear infinite;
}
.tech-slideshow:hover .mover-2 {
  opacity: 1;
}

@keyframes moveSlideshow {
  100% { 
    transform: translateX(-66.6666%);  
  }
}
<div class="tech-slideshow">
  <div class="mover-1"></div>
  <div class="mover-2"></div>
</div>

1 Ответ

3 голосов
/ 04 апреля 2019

Вы можете анимировать положение фона, например, переместить его влево на ширину изображения, поэтому, когда анимация заканчивается и начинается снова, вы фактически не увидите разницу. В этом случае ширина вашего фонового изображения составляет 26px , поэтому вам нужно смахнуть фон влево на ширину этого фона. В общем, вариантов много, все зависит от того, какую задачу нужно решить. 

@keyframes moveSlideshow {
   100% {
     background-position-x: -26px;
   }
}

Также поставьте желаемую скорость анимации.

...