Проблема с анимацией CSS
Я добавил анимацию, когда текст длиннее. Анимация должна двигаться справа налево, пока весь текст не повернется влево. Итак, вот часть кода css:
@keyframes scrollm {
0% {
transform: translate(0%, 0);
}
100% {transform: translate(-100%, 0%)}
}
и я использую здесь:
#someDiv:hover{
display: inline-block;
padding-left:100%;
-webkit-animation: scrollm 6s infinite linear;
-moz-animation: scrollm 6s infinite linear;
animation: scrollm 6s infinite linear;
}
Итак, проблема в том, что скорость разная для разной длины текста. Как мне решить его проблему. Любая идея?
Ответы 2
Вы определили скорость 6s long, так что везде она будет одинаковой. То, что вы видите, может заключаться в том, что элементы разного размера перемещаются с разной скоростью, чтобы попасть из точки А в точку Б в течение времени 6s.
перемещение 100% элемента шириной 10 пикселей будет двигаться быстрее, чем перемещение на такое же расстояние для элемента шириной 1000 пикселей. Левая сторона ближе к конечной точке одного из них, поэтому ей нужно преодолеть меньшее расстояние, чем другой, за тот же промежуток времени в 6 секунд.
Если вы вручную установите ширину элемента (или установите для нее значение display: block), скорость прокрутки будет соответствовать. Итак, что-то вроде:
#someDiv {
/* % or px value, whatever makes sense for your use case: */
width: 100%;
/* if you want the text on one line: */
white-space: nowrap;
}
Оно работает. но теперь он не показывает весь текст. Прокручивается не до конца текста
Я вижу, время скорости я определил как 6 с, но я полагаю, что движение с другой скоростью предназначено для трансформации, когда я использую процент.