Решил сделать простенькую бегущую строку через анимацию css.
Если в keyframes использовать left - все хорошо, работает в обе стороны, можно двигать и налево, и в направо.
Но если отталкиваться от right, то строка "крошится" об левую стенку родителя, вместо того чтоб плавно за ней скрыться, почему так?
<body>
<div class="container">
<!-- <div class="visible"> -->
<span>Текст туда-суда туда-суда туда-суда</span>
<!-- </div> -->
</div>
</body>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
position: relative;
background-color: bisque;
width: 500px;
height: 26px;
/* left: 100px; */
overflow: hidden;
}
.container span {
position: absolute;
right: -100%;
animation: run 2s linear infinite;
}
@keyframes run {
from {
right: -100%;
}
to {
right: 100%;
}
/* from {
left: -100%;
}
to {
left: 100%;
} */
/* from {
left: 100%;
}
to {
left: -100%;
} */
}
Средний
Простой
