Анимация печати с использованием только временной функции CSS3 steps ()
26 октября 2015 | Опубликовано в css | 2 Комментариев »
Тип временной функции steps() — интересное добавление к модулю анимации CSS3. Вместо того, чтобы создавать плавные переходы между указанными значениями, эта временная характеристика позволяет точно задавать количество кадров. Так что мы использовали ее для создания заголовков с широко известным эффектом анимации печати:
Код HTML
<h1>Typing animation by Lea Verou.<span> </span></h1>
Код CSS
@-webkit-keyframes typing { from { width: 100% } to { width:0 } } @-webkit-keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: black } } @-moz-keyframes typing { from { width: 100% } to { width:0 } } @-moz-keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: black } } body { font-family: Consolas, monospace; } h1 { position: relative; float: left; font-size:150%; } h1 span { position:absolute; top:0; right:0; width:0; background: white; /* same as background */ border-left: .1em solid black; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-animation: typing 17s steps(30, end), /* # of steps = # of characters */ blink-caret 1s step-end infinite; -moz-animation: typing 17s steps(30, end), /* # of steps = # of characters */ blink-caret 1s step-end infinite; }
Как Вы видите, количество букв задано во временной функции steps(), и это единственное место, которое нужно менять в зависимости от фразы. Все остальные значения не связаны с длинной выводящегося текста и могут быть изменены по необходимости. Кроме шрифта — это должен быть моноширинный шрифт, чтобы у всех символов была одинаковая ширина.
Еще для этого способа нужен непрозрачный фон и дополнительный тег <span>. Этих ограничений можно избежать, если анимировать непосредственно саму ширину заголовка, но в таком случае потребуется записать нужную ширину в анимацию, так что для каждой фразы придется менять два значения:
Код HTML
<h1>Typing animation by Lea Verou.</h1>
Код CSS
@-webkit-keyframes typing { from { width: 0 } to { width:16.3em } } @-moz-keyframes typing { from { width: 0 } to { width:16.3em } } @-webkit-keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: black } } @-moz-keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: black } } body { font-family: Consolas, monospace; } h1 { font-size:150%; width:16.3em; white-space:nowrap; overflow:hidden; border-right: .1em solid black; -webkit-animation: typing 17s steps(30, end), /* # of steps = # of characters */ blink-caret 1s step-end infinite; -moz-animation: typing 17s steps(30, end), /* # of steps = # of characters */ blink-caret 1s step-end infinite; }
Если сложно разобраться, как это работает, посмотрите на этот более простой пример, в котором анимируется только курсор.
В этом примере используются приставки производителей для движков Gecko у браузера Firefox, которые не нужны для современных версий этого браузера, и Webkit у браузеров Opera и Safari, так же используемый и браузером Chrome, свойство анимации без приставки производителя позволит отобразить анимацию также у последних версий браузера Internet Explorer, 10 и 11, и других современных версий браузеров. Хотя оба примера не теряют функциональность и в старых версиях браузеров и выглядят в них вполне нормально, по меньшей мере на наш взгляд.
Автор урока Lea Verou
Перевод — Дежурка
Смотрите также:
Комментарии
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений