Text Animations,

Animated Text

This   is   the   first   line
a   second   line
“random”   order
Special   characters   are   escaped

View this TYPO3 Element as Intro-Element.

The animated text content element is intended for intros. You can create multiple text elements with transition settings per element and character. The text elements have CSS classes per block, line, and character in the HTML markup, as well as various data attributes.
Excerpt from the generated HTML markup:

<span class="animated_text_line animated_text_line-odd" style="animation-delay: 11000ms;">
    <span class="animated_text_word"
          data-sd-word="Dies"
          data-sd-word-letter-count="4">
        <span class="animated_text_letter"
              data-sd-letter-letter="D"
              data-sd-letter-code="68"
              data-sd-letter-no="1"
              data-sd-letter-no-total="1"
              style="animation-delay: 1200ms;animation-duration: 1000ms;">D</span>
        <span class="animated_text_letter"
              data-sd-letter-letter="i"
              data-sd-letter-code="105"
              data-sd-letter-no="2"
              data-sd-letter-no-total="2"
              style="animation-delay: 1400ms;animation-duration: 1000ms;">i</span>
        <span class="animated_text_letter"
              data-sd-letter-letter="e"
              data-sd-letter-code="101"
              data-sd-letter-no="3"
              data-sd-letter-no-total="3"
              style="animation-delay: 1600ms;animation-duration: 1000ms;">e</span>
        <span class="animated_text_letter"
              data-sd-letter-letter="s"
              data-sd-letter-code="115"
              data-sd-letter-no="4"
              data-sd-letter-no-total="4"
              style="animation-delay: 1800ms;animation-duration: 1000ms;">s</span>
    </span>
    <span class="animated_text_letter animated_text_letter-space"> &nbsp; </span>
    <span class="animated_text_word"
          data-sd-word="ist"
          data-sd-word-letter-count="3">
        <span class="animated_text_letter"
              data-sd-letter-letter="i"
              data-sd-letter-code="105"
              data-sd-letter-no="1"
              data-sd-letter-no-total="6"
              style="animation-delay: 2200ms;animation-duration: 1000ms;">i</span>
        <span class="animated_text_letter"
              data-sd-letter-letter="s"
              data-sd-letter-code="115"
              data-sd-letter-no="2"
              data-sd-letter-no-total="7"
              style="animation-delay: 2400ms;animation-duration: 1000ms;">s</span>
        ...
    </span>
</span>