Анимация печати с использованием только временной функции CSS3 steps ()

26 октября 2015 | Опубликовано в css | 2 Комментариев »

Тип временной функции steps() — интересное добавление к модулю анимации CSS3. Вместо того, чтобы создавать плавные переходы между указанными значениями, эта временная характеристика позволяет точно задавать количество кадров. Так что мы использовали ее для создания заголовков с широко известным эффектом анимации печати:

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

Код HTML

<h1>Typing animation by Lea Verou.<span>&nbsp;</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, октября 26, 2015
Метки: css, css3, верстка, урок css, урок css3, урок верстка

�

Анимация печати с использованием только временной функции CSS3 steps ()

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые