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?

check this out

Unknown User
– Unknown User

2013-11-18 09:07:15 +00:00
Commented Nov 18, 2013 at 9:07 — Unknown User
– Unknown User, Commented Nov 18, 2013 at 9:07
I think u have to split letter by span and control it

Chia-Yu Pai
– Chia-Yu Pai

2013-11-18 09:08:02 +00:00
Commented Nov 18, 2013 at 9:08 — Chia-Yu Pai
– Chia-Yu Pai, Commented Nov 18, 2013 at 9:08

Alex · Accepted Answer · 2013-11-18 09:07:58Z

3

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

answered Nov 18, 2013 at 9:07

Alex

11.3k13 gold badges53 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alex Over a year ago

Yes, use javascript or better jQuery plugins(see other posts for plugins links)

oddy Over a year ago

@user1834809, It is true that css3 cannot yet apply pseudoclasses to a given letter, line nth-child. It is also true that for now you would have to wrap letters and apply animation to wrappers. codepen.io/FWeinb/pen/djuIx This is nth-letter plugin. You can then apply animation in css to any given letter in a word.

Vahid Taghizadeh · Accepted Answer · 2013-11-18 09:18:11Z

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

user2486514 · Accepted Answer · 2013-11-18 10:08:19Z

1

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.

answered Nov 18, 2013 at 10:08

user2486514

111 bronze badge

Comments

Ricky Sahu · Accepted Answer · 2014-11-05 17:13:36Z

1

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

answered Nov 5, 2014 at 17:13

Ricky Sahu

24.7k5 gold badges44 silver badges32 bronze badges

Comments

BEAGM · Accepted Answer · 2014-11-22 14:22:35Z

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.

gurvinder372 · Accepted Answer · 2013-11-18 09:07:25Z

0

try this

http://www.hungry-media.com/code/jQuery/tickerType/

Css3 cannot do it on its own, you will need some script to slice characters one by one

answered Nov 18, 2013 at 9:07

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

1 Comment

gurvinder372 Over a year ago

@user1834809 Link that I have shared is using css, but css alone cannot solve your requirement. You need some scripting to make text dymanic

Collectives™ on Stack Overflow

How to animate letters in text using css3?

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related