Question

是否可以单独为单词中的每个字母设置动画，仅使用CSS ？

我想可以使用javascript / jquery，将单词作为字母数组进行迭代。

但在这里，我正在寻找一个简单的方法..

Answer 1

无论您是使用CSS还是JavaScript，您（或某些库）都必须将每个字母放在自己的元素中，以便单独为它们设置动画。 E.g：

<p>Hi there</p>

......需要成为

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

这让我觉得JavaScript解决方案可能更受欢迎，否则你的标记会有点......写起来很不愉快。

使用jQuery的JavaScript，很容易用一堆包含该字符的字符串替换元素的文本：

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

然后你为span设置动画。（注意我在这里假设有问题的元素包含仅文本，而不包含文本和子元素。如果你有子元素，它会更复杂。）

这是一个非常基本的例子：

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

Answer 2

只有CSS才能实现（直到有第n个字母规范被接受）。在此期间，您可以使用lettering.js http://letteringjs.com/将每个字母包裹在一个范围内，然后单独为每个字母设置动画。

Answer 3

技术T.J. Crowder描述的非常好，但它不适用于更复杂的案例。进入跨度的白色空间消失，这可能会导致一些问题。如果将跨距的显示设置为内联块（您需要它，为某些属性设置动画），您最终会得到一个长字。所以这种技术对于简单的淡入/淡出动画非常有用，但对于更高级的情况，我建议使用https://github.com/jschr/textillate/blob/master/jquery.textillate.js这个jQuery插件。

P.S。

我修改了先生。 Crowder代码因此可以使用空格来正常工作：

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

我使用TweenMax staggerFromTo（）方法对其进行了动画处理，对我来说效果很好。

以下是一些演示：http://blog.bassta.bg/2013/05/text-animation-with-tweenmax/

可以单独为每个字母设置动画吗？

3 个答案: