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

Анимация текста без 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 (отступ сверху), а не absolutely-positioning (абсолютную позицию) текста.

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