Эффект печатающегося текста с помощью CSS3

Существует немало решений для реализации эффекта печатающегося текста с помощью javascript. На jQuery например, можно с текстом выписывать такие кренделя, что диву даёшься. Но меня всегда интересует возможность выполнения той или иной задачи с помощью свойств CSS3, конечно только тогда, когда это оправданно и не несёт явных потерь в общей картине конечного результата.
На одном из проектов, мне понадобилось (с легкой руки и по прихоти заказчика) выполнить краткое описание сайта в виде печатающегося текста появляющегося под логотипом вовремя загрузки. Как-то не очень-то хотелось из-за одной строки, подключать в работу дополнительный плагин. Долго искать оптимального решения не пришлось, с помощью CSS-анимации можно создать вполне привлекательную иллюзию печатающегося текста.
Конечно, с использованием специальных jQuery-плагинов, Typed.js например, возможностей больше, в плане настроек и регулирования различных параметров эффекта. Но для простенького печатающегося текста, вполне можно обойтись исключительно средствами CSS, достаточно лишь несколько строк кода и ваш текст оживет.

Использование CSS анимации

Прежде чем приступить к разбору и описанию свойств CSS, хочу предупредить, что эффект отлично работает в современных браузерах, Firefox, Chrome, Opera и даже IE начиная с 10-й версии справляется с анимацией CSS. Для версий IE9 и ранних, лучше использовать механизмы javascript.

В CSS-анимации есть замечательная функция animation-timing-function, свойство которое описывает метод расчета промежуточных значений свойств при анимации. С помощью одной из фунций этого свойства, а именно steps (), мы сможем определить количество кадров анимации, удалив привычную плавную анимацию и создадим блок анимации, воссоздающий реальный эффект набора текста.
Используя значения функции steps(), мы можем реализовать анимацию, увеличивая размер элементов начиная от 0 и до конца строки(абзаца)

Применим свойство анимации для коротенького абзаца, для этого нужную нам строку текста обернем тегом <p> с определенным классом, например: class="text-typing", в итоге получит следующую конструкцию в html:

<p class="text-typing">Простой пример создания печатающегося текста с помощью CSS3-анимации....</p>

Теперь, непосредственно в css определим все необходимые свойства для этого класса. Выставим нужную нам ширину абзаца, размер, цвет и начертание шрифта, добавим свойство overflow:hidden;, тем самым с помощью связки со значением 0 в @keyframes скроем текст до включения анимации в работу. И наконец определим нужные нам значения анимации в временной функции steps ()

Значения CSS для примера:

.text-typing
{
    width: 40em;
    color:green;
    font-size: 22px;
    font-family: 'Marck Script', cursive;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: type 5s steps(50, end);
    animation: type 5s steps(50, end);
}
@keyframes type{
    from { width: 0; }
}
 
@-webkit-keyframes type{
    from { width: 0; }
}

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

В работе использовал оригинальный сниппет из коллекции paulund.

С уважением, Андрей.