Раньше мы рассказывали, как использовать временную функцию steps() для создания эффекта анимации печати, который не теряет функциональность в старых версиях браузеров. В этом уроке мы покажем, как упростить то решение и сделать его более гибким, но, к сожалению, менее поддерживаемым браузерами. Новая версия полностью работает в браузере Firefox, но не во всех версиях правильно отображаются все шрифты, в браузере Internet Explorer от версии 10, но ширина шрифтов отображается неверно, в браузерах Chrome от версии 26 и Opera от версии 15. 

Вкратце: одна единица измерения ch равна ширине символа нуля (0) шрифта. Так что в моноширинных шрифтах единица измерения ch равна ширине любого символа, так как все символы одной ширины.

В новой версии нам не нужен тег span для задания цвета фона, так что нам не нужна дополнительная разметка HTML, и анимация будет работать не только на одноцветном фоне. Еще, хотя количество символов также нужно задавать, это больше не надо делать в самой анимации, так что его можно легко изменить с помощью скрипта без создания или изменения файлов таблиц стилей. Обратите внимание, что у каждой анимации есть только один ключевой кадр, мы пользуемся тем, что при отсутствии ключевых кадров from (0%) и to (100%) браузер создает из их стилей. Этой особенностью можно активно пользоваться при создании анимаций, если Вам не нравится писать одно и то же.

В браузерах, которые поддерживают анимации CSS, но не поддерживают единицу измерения ch, например, старых версиях браузеров на движке Webkit, анимация все равно происходит, так как задан обходной путь в единицах измерения ems, но анимация не будет идеальной. Нам нравится такой обходной путь, но если у Вас иное мнение, просто задайте автоматическое значение обходного пути для ширины, или вообще не задавайте значение, и тогда оно само изменится на автоматическое. В старых версиях браузеров, которые не поддерживают анимаций CSS, курсор редактирования будет немигающей черной линией. На наш взгляд, лучше так, чем если его совсем не видно, но если Вы не согласны, его можно легко полностью спрятать в таких браузерах: просто поменяйте местами цвет границы у ключевого кадра и h1, не забывая, что когда цвет границы не задан, то применяется текущий цвет.

Посмотрите, как это выглядит:

Демонстрация работы

Код HTML

<h1>Typing animation by Lea Verou.</h1> 

Код CSS

/** * Анимация печати на чистом CSS. * Работает, как задумано, в браузерах, поддерживающих единицу изерения ch. */

@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }
h1 {
        font: bold 200% Consolas, Monaco, monospace;
        border-right: .1em solid;
        width: 16.5em; /* обходной путь */
        width: 30ch; /* количество символов */
        margin: 2em 1em;
        white-space: nowrap;
        overflow: hidden;
        animation: typing 20s steps(30, end), /* количество шагов равно количеству символов */
                   blink-caret .5s step-end infinite alternate;
}

Автор урока Lea Verou

Смотрите также:

• Анимация печати с использованием только временной функции CSS3 steps ()
• Создание текстовых эффектов с использованием CSS3
• Создание анимированного меню с использованием CSS3