I recently found this jQuery plugin that allowed you to easily create a typing effect on your website. This plugin is an open source plugin available on Github called typed.js. In this post I will show you this jQuery plugin but also show how you can create a typing effect by just using CSS animation.

The setup of this plugin is very easy all you have to do is include the plugin in your application and use the following code.


<script src="typed.js"></script>
<script>
  $(function(){
      $(".element").typed({
        strings: ["First sentence.", "Second sentence."],
        typeSpeed: 0
      });
  });
</script>
...

<div class="element"></div>

On page load this will start typing in the first sentence and then will type the second sentence. You can customise the speed it types by passing the amount of milliseconds to complete the animation. I've created a demo page to show you how this effect looks.

If you want to use this effect in your projects you can download the typed.js project from on github. Typed.js Project

Using CSS Animation

The typed.js plugin is a nice, easy to use jQuery plugin but it is a jQuery plugin which means you need to load this library into your application in order to use it, adding more weight and http requests to your page. This will be fine if this was the only way you can create this effect but you can create a typing effect with just CSS. CSS animation allow you to use a animation timimg function which tells the animation how it will progress until the end of the animation time. One of these timing functions is called steps() which allows you to define the amount of frames the animation will use, this will remove the smooth animation your used to and create a more block like animation, exactly what we want for typing. Using the steps() function we can create an animation which all it will need to do is increase the size of the element from 0 to the end of the paragraph. First start off by creating the paragraph you want to animate the typing.


<p class="css-typing">This is a paragraph that is being typed by CSS animation.</p>

Using CSS we will add the animation required, first start of by defining a width for the paragraph this is so the animation knows how much to grow. Next add an overflow hidden so when the animation resizes the paragraph to 0 we won't be able to see the text. Finally we can add the animation of type with the steps() timing function.


.css-typing
{
    width: 30em;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: type 5s steps(50, end);
    animation: type 5s steps(50, end);
}

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

@-webkit-keyframes type{
    from { width: 0; }
}

The animation will increase the size of the paragraph from 0 to 30em, in 50 frames therefore creating an effect that the text is being typed. View the demo to see what this looks like.

Create A Typing Effect In CSS

Using CSS Animation