Как сделать чтобы анимация была плавней в сss

Рейтинг: 0Ответов: 2Опубликовано: 01.04.2023

Доброе утро. У меня есть подобие карусели. Блоки зацикленно крутятся,но когда заканчиваются блоки-происходит некрасивый переход. Можно ли сделать это как то плавно? Буду рад любой помощи

   body {
      align-items: center;
      background: #E3E3E3;
      display: flex;
      height: 100vh;
      justify-content: center;
  }
  .slide-track-stop{
    display: flex;
          width: calc(250px * 7);
      animation: scroll 40s linear infinite;
  }
  
  
  
  
  
  @keyframes scroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(calc(-250px * 3))}
  }
  
  
  .slider {
      background: white;
      box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
      height: 100px;
      margin: auto;
      overflow:hidden;
      position: relative;
      width: 960px;
  }
  
      
  .slider:after {
          right: 0;
          top: 0;
          transform: rotateZ(180deg);
      }
  
      .slider:before {
          left: 0;
          top: 0;
      }
      
      .slide-track {
          animation: scroll 40s linear infinite;
          display: flex;
          width: calc(250px * 10);
      }
      
      .slide {
          height: 100px;
          width: 250px;
      }
      .block{
        width: 250px;
        height: 100px;
        background-color: green;
        margin-right:10px ;
      }
 <div class="slider">
    <div id="slide-track" class="slide-track">
    <div class="block">БЛОК1 </div> 
    <div class="block">БЛОК2 </div>
    <div class="block">БЛОК3 </div> 
    <div class="block">БЛОК4 </div>
    <div class="block">БЛОК5 </div> 
    <div class="block" >БЛОК6 </div>
    <div class="block">БЛОК7</div>  
  
</div>

css html animate
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Дублируйте набор слайдов и смещайте контейнер со слайдами на половину получившейся ширины.

Тайминги анимации изменил так, чтобы было видно, что никаких скачков не происходит.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  background: #E3E3E3;
}

.slider {
  margin: auto;
  width: 960px;
  overflow: hidden;
  filter: drop-shadow(0 10px 5px #0004);
}

.slide-track {
  display: flex;
  width: min-content;
  animation: scroll 15s ease-in-out infinite;
}

.block {
  margin-right: 10px;
  width: 250px; height: 100px;
  background-color: green;
}

@keyframes scroll { to { transform: translateX(-50%); } }
<div class="slider">
  <div id="slide-track" class="slide-track">
    <div class="block">БЛОК1</div>
    <div class="block">БЛОК2</div>
    <div class="block">БЛОК3</div>
    <div class="block">БЛОК4</div>
    <div class="block">БЛОК5</div>
    <div class="block">БЛОК6</div>
    <div class="block">БЛОК7</div>
    
    <div class="block">БЛОК1</div>
    <div class="block">БЛОК2</div>
    <div class="block">БЛОК3</div>
    <div class="block">БЛОК4</div>
    <div class="block">БЛОК5</div>
    <div class="block">БЛОК6</div>
    <div class="block">БЛОК7</div>
  </div>
</div>

Чтобы не утяжелять разметку вручную, можно задействовать JS:

let slideTrack = document.querySelector('.slide-track');
slideTrack.querySelectorAll('.block').forEach(el => {
  slideTrack.append(el.cloneNode(true));
});
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  background: #E3E3E3;
}

.slider {
  margin: auto;
  width: 960px;
  overflow: hidden;
  filter: drop-shadow(0 10px 5px #0004);
}

.slide-track {
  display: flex;
  width: min-content;
  animation: scroll 15s ease-in-out infinite;
}

.block {
  margin-right: 10px;
  width: 250px; height: 100px;
  background-color: green;
}

@keyframes scroll { to { transform: translateX(-50%); } }
<div class="slider">
  <div id="slide-track" class="slide-track">
    <div class="block">БЛОК1</div>
    <div class="block">БЛОК2</div>
    <div class="block">БЛОК3</div>
    <div class="block">БЛОК4</div>
    <div class="block">БЛОК5</div>
    <div class="block">БЛОК6</div>
    <div class="block">БЛОК7</div>
  </div>
</div>

▲ 3

Всему виной "margin-right: 10px;" у ".block".
Вы думали что его ширина 250px, а на самом деле margin дал ему ещё большую ширину.
Нужно всегда учитывать margin-ы, они ведь тоже хотят места для себя)).

body {
    align-items: center;
    background: #E3E3E3;
    display: flex;
    height: 100vh;
    justify-content: center;
}
.slide-track-stop{
  display: flex;
  width: calc(250px * 7);
  animation: scroll 40s linear infinite;
}


.slider {
  background: white;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
  height: 100px;
  margin: auto;
  overflow:hidden;
  position: relative;
  width: 960px;
}


.slider:after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}

.slider:before {
    left: 0;
    top: 0;
}

.slide-track {
    animation: scroll 20s linear infinite;
    display: flex;
    width: calc(250px * 10);
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-250px * 4))}
}

.slide {
    height: 100px;
    width: 250px;
}
.block{
  width: 250px;
}
.inner {
  height: 100px;
  margin-right: 10px;
  background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="slider">
    <div id="slide-track" class="slide-track">
    <div class="block">
      <div class="inner">БЛОК1</div>
    </div> 
    <div class="block">
      <div class="inner">БЛОК2</div>
    </div> 
    <div class="block">
      <div class="inner">БЛОК3</div>
    </div> 
    <div class="block">
      <div class="inner">БЛОК4</div>
    </div> 
    <div class="block">
      <div class="inner">БЛОК5</div>
    </div> 
    <div class="block">
      <div class="inner">БЛОК6</div>
    </div> 
    <div class="block">
      <div class="inner">БЛОК7</div>
    </div> 
</div>