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

В этой статье мы разберем эффект набора текста на пишущей машинке с помощью CSS, без какого-либо обращения к JavaScript.

Код HTML содержит всего два блока:

<div class="container">
    <div class="type">
        Это эффект печатной машинки на чистом CSS
    </div>
</div>

А теперь магия CSS:

@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro&display=swap');

.container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.type {
    width: 45rem;
    margin: 0;
    padding: 0;
    #background: #555;
    animation: typing 8s steps(45), blink 0.5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    font-family: 'Anonymous Pro', monospace;
    font-size: 2em;
    text-align: left;
}
@keyframes typing {
    from {
        width: 0
    }
}    
@keyframes blink {
    50% {
        border-color: transparent
    }
}

Обратим внимание на ключевые моменты CSS-кода:

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

Готовый пример можно посмотреть на codepen:

Спасмибо за внимание

Написано по материалам статьи Stokry “Typing effect without Javascript”.