Typing Effect Animation CSS3

In this week's tutorial, I'll be showing you how to code a cool CSS3 typing animation effect. This really cool typewriting effect was inspired by the creativity of Lea Verous and Rus James.

The HTML

First, we’re going to code the container and then we’ll code two paragraphs for our typewriter effect. Feel free to get creative with what sentences you want to have typed out.


<div class="xop-container">
<p>This is a typing effect made with CSS3 Animation.</p>
<p>I hope you enjoyed this tutorial <span class="heart">♥︎</span> XO PIXEL. <span class="cursor">|</span></p>
</div>

The CSS

The CSS for the typewriter effect is simple. The usual body and container elements are styled first. Then, we’re going to give the paragraph tags some style with the help of Google Fonts and various CSS properties. Make sure that you use a monospaced font so that every character has the same width.


@import url('https://fonts.googleapis.com/css?family=Inconsolata');

body {
    background: url('../images/linedpaper.png');
    margin: 0;
    padding: 0;
}

.container {
    width: 960px;
    margin: 50px auto;
}

p {
    font-family: 'Inconsolata', monospace;
    font-size: 34px;
    color: dimgray;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    margin: 10px 0;
    animation: typing 4s steps(60, end);
}

There are a couple of animations that make up the typewriting effect; the typewriter animation and the blinking of the cursor. The type effect is executed by the animation and @keyframes type and @keyframes type2 properties.


p:nth-child(2) {
    animation: typing-2 8s steps(60, end);
}

@keyframes typing {
    from {width: 0;}
}

@keyframes typing-2 {
    0% {width: 0;}
    50% {width: 0;}
    100% {width: 100;}
}

The animation for the cursor is executed by the use of the @keyframes blink and the animation property applied to the span tag.


@keyframes blink {
    to {opacity: .0;}
}

.cursor {
    animation: blink 1s infinite;
}

.heart {
    color: #ff7bac;
}

Comment Below

Feel free to share a screenshot of what you’ve made using this tutorial in the comments section below! Have any questions or comments? Let’s chat in the comment below!

Leave a Reply

Your email address will not be published. Required fields are marked *

More On XO PIXEL