.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;
}
Комментариев нет:
Отправить комментарий