How to animate letters in text using css3?

Question

I would like to animate small text, I want to display the letters one by one?

Is there any way to do it using CSS3?

Solution 1

Just wrap your letters in a single tag, for example span and animate them. W3C specification has only first-letter pseudo class.

Solution 2

Or check this keyframes animation

@-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;
}

Solution 3

I use textillate.js which depends on animate.css. It's super easy to get started with those two. From their docs:

<h1 class="tlt">My Title</h1>

And your JavaScript should look like this:

$(function () {
    $('.tlt').textillate();
})

https://github.com/jschr/textillate https://github.com/daneden/animate.css

Solution 4

http://letteringjs.com/ is a plugin for jQuery which wraps every letter in a span tag to animate but keeps the html clean in the source. A good solution if you're already using jQuery, unfortunately there is no pure CSS solution as yet.

Solution 5

If you only need to display something letter by letter, you don't need jQuery or Textillate or any other plug-in. Just copy this.

<script type="text/javascript">
function printLetterByLetter(destination, message, speed){
    var i = 0;
    var interval = setInterval(function(){
        document.getElementById(destination).innerHTML += message.charAt(i);
        i++;
        if (i > message.length){
            clearInterval(interval);
        }
    }, speed);
}

window.onload = function(){
    printLetterByLetter("someElement", "Hello world, bonjour le monde.", 100);
}
</script>

Replace 'someElement' by the id of the html element where the text is displayed. Replace '100' by any other number. Here it means a new letter appears every 100 milliseconds.

View more solutions