Страницы

Поиск по вопросам

вторник, 2 апреля 2019 г.

Почему анимация дёргается и встаёт в исходное положение вместо того, чтобы продолжаться?

.header_mid { height: 100px; } .header_mid .logo_slide { padding: 25px 0; height: 50px; overflow: hidden; position: relative; } .header_mid .logo_slide ul { display: block; width: 200%; height: 50px; position: absolute; overflow: hidden; animation: marquee 10s linear infinite; } .header_mid .logo_slide .logo_item { height: 50px; padding: 0 20px; float: left; } @keyframes marquee { 0% { left: 0; } 100% { left: -100%; } } .header_mid .logo_slide ul:hover { animation-play-state: paused; }


У меня есть бегущая строка с логотипами, но к моменту завершения первого цикла и начала второго, анимация дёргается и встаёт в исходное положение. Не понимаю, как решить эту проблему.
Бегущая строка должна быть сделана без использования js и должна быть резиновой. Javascript крайний вариант.
Вот ссылка на мою бегущую строку


Ответ

Прошло много времени с момента публикации вопроса, а я так и не написал решение. Решения оказалось костлявым. Исходя из комментариев пользователя @Утка было решено дублировать список и подогнать параметры анимации так, чтобы новый запуск анимации происходил ровно в тот момент, когда выезжает дубль. Все это с фиксированной шириной списка.
.header_mid { height: 100px; } .header_mid .logo_slide { padding: 25px 0; height: 50px; overflow: hidden; position: relative; width:100%; margin: auto; } .loop, .loop-clone { display: block; -width: 200%; width:1510px; height: 50px; position: absolute; overflow: hidden; } .loop { animation: marquee 60s linear infinite; } .loop-clone { animation: marquee-clone 60s linear infinite; } .header_mid .logo_slide .logo_item { height: 50px; padding: 0 20px; float: left; } @keyframes marquee { 0% { left: 0; } 50% { left: -1510px; } 50.001% { left: 1510px; } 100% { left: 0; } } @keyframes marquee-clone { 0% { left: 1510px; } 50% { left: 0; } 100% { left: -1510px; } } .header_mid .logo_slide:hover ul,.header_mid .logo_slide .loop-clone ul { animation-play-state: paused; }

  • PerfectMoney logo
  • Qiwi logo
  • YandexMoney logo
  • OkPay logo
  • ADVcash logo
  • PayPal logo
  • Payeer logo
  • Bitcoin logo
  • OneCoin logo
  • SwisCoin logo
  • PerfectMoney logo
  • Qiwi logo
  • YandexMoney logo
  • OkPay logo
  • ADVcash logo
  • PayPal logo
  • Payeer logo
  • Bitcoin logo
  • OneCoin logo
  • SwisCoin logo

Комментариев нет:

Отправить комментарий