Question

Is there way to animate each letter in a word separately, using only CSS?

I guess it’s possible to do, using javascript/jquery, iterating over the word as an array of letters.

But here I’m looking for an easy way out..

Answer 1

Whether you do it with CSS or JavaScript, you (or some library) are going to have to put each letter in its own element in order to animate them individually. E.g.:

<p>Hi there</p>

…will need to become

<p><span>H</span><span>i</span><span> </span><span>t</span><span>h</span><span>e</span><span>r</span><span>e</span></p>

That leads me to think a JavaScript solution might be preferred, as otherwise your markup will be a bit…unpleasant to write.

With JavaScript using jQuery, it’s quite easy to replace the text of an element with a bunch of spans containing that text character-by-character:

var target = $("#target");
target.html(target.text().replace(/./g, "<span>$&</span>"));

Then you animate the spans. (Note I’m assuming here that the element in question contains only text, not text and child elements. It’s more complex if you have child elements.)

Here’s a very basic example:

HTML:

<p id="target" style="margin-top: 20px">Hi there</p>

JavaScript:

jQuery(function($) {

  var target = $("#target");
  target.html(target.text().replace(/./g, "<span>$&</span>"));

  setTimeout(runAnimation, 250);

  function runAnimation() {
    var index, spans;

    index = 0;
    spans = target.children();
    doOne();

    function doOne() {
      var span = $(spans[index]);
      if (!$.trim(span.text())) {
        // Skip blanks
        next();
        return;
      }

      // Do this one
      span.css({
        position: "relative",
      }).animate({
        top: "-20"
      }, "fast").animate({
        top: "0"
      }, "fast", function() {
        span.css("position", "");
        next();
      });
    }

    function next() {
      ++index;
      if (index < spans.length) {
        doOne();
      }
      else {
        setTimeout(runAnimation, 500);
      }
    }
  }

});

Live copy | source