Анимация набора текста на CSS

Анимация набора текста на CSS

На этом уроке разберем как можно имитировать ввод текста с клавиатуры с помощью CSS анимации. Эффект печатающегося текста способен оживить вашу веб-страницу, не прилагая особых усилий. Анимация будет запускаться один раз при при загрузке страницы и этого вполне достаточно.

HTML разметка

Создадим разметку из контейнера для текста с классом wrapper и из блока самого текста с классом text.


<div class="wrapper">
    <div class="text">Анимация набора текста на CSS</div>
</div>

CSS стили

Выравниваем наш текст по центру и делаем отступ сверху.


.wrapper {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

Теперь стилизуем сам печатающийся текст. В конце строки для реалистичности поставим курсор. Изобразить курсор можно с помощью рамки. Отобразим только правую сторону рамки border-right. Использование моношириного шрифта не преподнесет никаких сюрпризов, поскольку у данного шрифта одинаковая ширина маленьких и заглавных букв.


.text {
    color: white;
    font-family: monospace;
    font-size: 30px;
    white-space: nowrap; /* не переносить текст на новую строку */
    overflow: hidden; /* скрываем переполнение контентом */
    border-right: 3px solid white; /* рисуем курсор */

}

Анимация набора текста на CSS

Создание анимации для курсора

Объявим анимацию через правило @keyframes и создадим три ключевых кадра анимации: первый кадр (0%) — курсор белого цвета, второй кадр (50%) — курсор прозрачного цвета, третий кадр (100%) — курсор белого цвета. В итоге мы получим мигающий курсор.


@keyframes cursor {
    0%{
        border-color: white;
    }

    50%{
        border-color: transparent;
    }

    100%{
        border-color: white;
    }
}

Применим анимацию с названием cursor к тексту. Для этого добавим к стилям новую строку, где cursor (имя анимации), 0.75s (время длительности анимации), step-end (названии функции способа анимации) и infinite (бесконечная анимация).


.text {
    ...
    animation: cursor 0.75s step-end infinite;
}

Создание анимации набора текста

Суть анимации текста состоит в изменении ширины текста от нуля символов до количества символов включая пробелы, самого текста. Напишем новой правило @keyframes, состоящее из одного кадра.


@keyframes printed_text {
    from{
        width: 0;
    }
}

Наш текст состоит из 29 символов. Добавим новой свойство в стили с классом text.


.text {
    ...
    width: 29ch;
}

А еще добавим через запятую новую анимацию printed_text, указав в параметрах функции steps количество символов у текста.


.text {
    ...
    animation: cursor 0.75s step-end infinite,
    printed_text 5s steps(29);

}

Код класса text целиком.


.text {
    width: 29ch;
    color: white;
    font-family: monospace;
    font-size: 30px;
    white-space: nowrap; /* не переносить текст на другую строку */
    overflow: hidden; /* скрываем переполнение контентом */
    border-right: 3px solid white; /* рисуем курсор */
    animation: cursor 0.75s step-end infinite,
    printed_text 5s steps(29);
}

Посмотрите демо на CodePen

Источник

Просмотров:

Добавить комментарий

Adblock
detector