Анимация текста

Анимация текста без JavaScript, и нет растровой графики. Пример анимации текста на чистом CSS3.

Демо

Сделать эффект для текста с 3D преобразованием очень просто. В HTML нужно создать элемент #titles, и область в котором будет прокручиваться текст #titlecontent.

HTML

<div id="titles">
   <div id="titlecontent">
     текст
   </div>
</div>

Элемент div с атрибутом id="titles" позиционируется в центре нижней части окна браузера и двигается с помощью 3D перспективы используя преобразования, префиксы в коде отсутствуют, но они есть в демонстрации.

CSS

#titles {
  position: absolute;
  width: 18em;
  height: 50em;
  bottom: 0;
  left: 50%;
  margin-left: -9em;
  font-size: 350%;
  font-weight: bold;
  text-align: justify;
  overflow: hidden;
  transform-origin: 50% 100%;
  transform: perspective(300px) rotateX(25deg);
}

Псевдоэлемент :after применяется для наложения отдаления градиента в верхней части первого элемента div:

#titles:after {
  position: absolute;
  content: ' ';
  left: 0;
  right: 0;
  top: 0;
  bottom: 60%;
  background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
  pointer-events: none;
}

Всё что нам осталось сделать — это прокрутка содержимого с помощью CSS анимации:

#titlecontent {
  position: absolute;
  top: 100%;
  animation: scroll 100s linear 4s infinite;
}
@keyframes scroll {
  0% { top: 100%; }
  100% { top: -170%; }
}

используйте свойство margin-top (отступ сверху), а не абсолютную позицию для текста.

Поддержка браузерами примера анимации
Edge IE Chrome Opera Safari Firefox Android iOS
12+ 10+