@steklovatnik

Что не так с right для блоков с position:absolute?

Решил сделать простенькую бегущую строку через анимацию 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%;
  }  */
}
  • Вопрос задан
  • 69 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы