1

Как настроить анимацию так, чтобы элементы плавно плыли по течению. Думаю проблема в процентный значениях между кадрами. Вот песок: https://jsfiddle.net/8awkpysn/1/ И собственно код.

.q1{
  position:absolute;
  left:0px;
  width:100px;
  height:80px;
  background:black;
  animation: c1 5s linear infinite; 
}
.q2{
  position:absolute;
  left:110px;
  width:100px;
  height:100px;
  background:black;
  animation: c2 5s linear infinite;
}
 
@keyframes c1 {
   15%{
       left:-252px;
   }
   15.1%{
        left:450px;
   }
 }
@keyframes c2 {
   15%{
       left:-252px;
   }
   15.1%{
        left:560px;
   }
   to{
       left:110px;
   }
}
<p class="q1"></p>
<p class="q2"></p>

1
  • Не вижу проблемы, у меня элементы плавно текут влево
    – Yuri
    26 ноя 2016 в 18:00

1 ответ 1

0

Нужно перемещать блоки на одинаковое расстояние чтобы у них была одинаковая скорость.

.q1{
  position:absolute;
  left: 702px;
  width:100px;
  height:80px;
  background:black;
  animation: c1 5s linear infinite; 
}
.q2{
  position:absolute;
  left: 702px;
  width:100px;
  height:100px;
  background:black;
  animation: c2 5s linear infinite .7s;
}

@keyframes c1 {
   0%{
       left: 702px
   }
   100%{
        left: -100px
   }
 }
@keyframes c2 {
   0%{
       left: 702px
   }
   100%{
        left: -100px
   }

}
8
  • Забыл, не могу сделать так чтобы первый после того как исчезал появлялся в конце, как слайлер
    – PeGaS
    26 ноя 2016 в 19:36
  • обновил код, блоки стартуют с одной позиции, проходят одинаковое расстояние чтоб скорость была одинаковой, второй стартует с задержкой так происходит разрыв между блоками, как то так. 26 ноя 2016 в 20:55
  • Спасибо! идеально.
    – PeGaS
    27 ноя 2016 в 7:50
  • Подобные слайдеры на JS делают? просто на чистом CSS я голову сломал пока расстояние и скорость настроил
    – PeGaS
    27 ноя 2016 в 18:09
  • Это мало чем слайдер напоминает, просто анимация слайдеры обычно по другому устроены, вот к примеру хороший owlcarousel2.github.io/OwlCarousel2/index.html 28 ноя 2016 в 8:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.