css анимация пробела: nowrap; - PullRequest
Новая
       80

css анимация пробела: nowrap;

0 голосов
/ 15 декабря 2018

Я работаю над созданием анимации css, которая должна начинать текст с правой стороны экрана, переходить влево, оборачиваться и повторяться.

У меня есть довольно большие буквы, так чтоЯ делаю 

white-space: nowrap;

, поэтому текст не переходит на другую строку.

Я получил хорошую прокрутку анимации с помощью 

0% {
    transform: translateX(5%)
}
100% {
    transform: translateX(-100%)
}

, и я поместил 

animation: animation-name 5s infinite;
animation-timing-function: linear;

в класс

Единственная проблема, с которой я столкнулся, заключается в том, чтос большими буквами и пробелом: nowrap вызывает увеличение ширины страницы, потому что буквы увеличивают ширину страницы.Есть ли способ обойти это так, чтобы анимация все еще прокручивалась, но не увеличивала ширину страницы?

enter image description here

пример изображения выше.

1 Ответ

0 голосов
/ 15 декабря 2018

Просто поместите overflow-x: hidden в родительский класс. 

body {
  overflow-x: hidden;
}

div {
  font-size: 150px;
  white-space: nowrap;
  animation: animation-name 5s infinite;
  animation-timing-function: linear;
}

@keyframes animation-name {
  0% {
    transform: translateX(5%)
  }
  100% {
    transform: translateX(-100%)
  }
}
<div>
  Some pretty large letters
</div>
...