<div class="l-wrapper">
  <p class="c-text js-span-wrap-text">
    これは一文字ずつアニメーションする<br />
    もじのサンプルです
  </p>
</div>
.l-wrapper {
  padding: 50px;
}

.c-text {
  font-size: 20px;
  line-height: 1.4;
  span {
    display: inline-block;
    opacity: 0;
    @for $i from 1 through 30 {
      &:nth-child(#{$i}) {
        animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) #{$i * 0.1}s forwards;
      }
    }
  }
}

@keyframes text {
  0% {
    opacity: 0;
    transform: translateX(-20px) translateY(-10px) scale(1.3);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
View Compiled
class SpanWrap {
  constructor() {
    this.settings = {
      target: ".js-span-wrap-text"
    }
    this.targets = "";
    this.targetLength = 0;
    this.nodes = [];
    this.convertContents = [];
  }

  init(options) {
    this.setup(options);
    this.getNodes();
    this.convert();
    this.set();
  }

  setup(options) {
    this.settings = Object.assign({
      target: this.settings.target
    }, options || {});
    this.targets = document.querySelectorAll(this.settings.target);
    this.targetLength = this.targets.length;
  }

  getNodes() {
    for (let target of this.targets) {
      let nodes = target.childNodes;
      this.nodes.push(nodes);
    }
  }
  
  convert() {
    for (let i = 0; i < this.targetLength; i++) {
      this.convertContents.push([]);//カラの配列を追加
      for (let node of this.nodes[i]) {
        if (node.nodeType == 3) {//テキストの場合
          let text = node.textContent.replace(/\s+/g, '');//テキストから空白削除
          text.split('').forEach((v) => {
            this.convertContents[i].push("<span>" + v + "</span>");
          });

        } else {//テキスト以外
          this.convertContents[i].push(node.outerHTML);
        }
      }
    }
  }

  set() {
    for (let i = 0; i < this.targetLength; i++) {
      this.targets[i].innerHTML = this.convertContents[i].join("");
    }
  }

}

const spanWrap = new SpanWrap();
spanWrap.init();
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.