Блог

Главная - Вопросы по программированию - Как плавно выполнить анимацию CSS без перерыва в конце

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

#html #css #css-animations

#HTML #css #css-анимации

Вопрос:

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

 .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. почему -мы голосуем, пожалуйста, ответьте?

Ответ №1:

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

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

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