Потрясающие эффекты анимации текста

<link rel='stylesheet' href='animations.css'>

<div class='is-animate container-exibition-text style1'>
  <div>h</div>
  <div>e</div>
  <div>l</div>
  <div>l</div>
  <div>o</div>
</div>

.is-animate.style1 > div { animation-name: style1; }

.is-animate > div {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

.is-animate > div:nth-child(1) { animation-delay: 0.0s }
.is-animate > div:nth-child(2) { animation-delay: 0.1s }
.is-animate > div:nth-child(3) { animation-delay: 0.2s }
.is-animate > div:nth-child(4) { animation-delay: 0.3s }
.is-animate > div:nth-child(5) { animation-delay: 0.4s }

.container-exibition-text {
  font-size: 30px;
}
.container-exibition-text > div {
  background-color: #3f51b5;
  margin: 1px;
  color: #fff;
  padding: 0 12px;
  border-radius: 4px;
  box-shadow: 1px 1px 9px -3px #000;
  display: inline-block;
}

<link rel="stylesheet" href="jquery.animatedheadline.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="jquery.animatedheadline.min.js"></script>
<script src="main.js"></script>

<section class="intro animate-rotate-1">
  <h1 class="ah-headline">
    <span>My favorite food is</span>
    <span class="ah-words-wrapper">
    <b class="is-visible">pizza</b>
    <b>sushi</b>
    <b>steak</b>
    <b>привет</b>
    </span>
  </h1>
</section>

<script src='typed.js'></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {

        Typed.new("#typed", {
            stringsElement: document.getElementById('typed-strings'),
            typeSpeed: 30,
            backDelay: 500,
            loop: false,
            contentType: 'html', // or text
            // defaults to null for infinite loop
            loopCount: null,
            callback: function() {
                foo();
            },
            resetCallback: function() {
                newTyped();
            }
        });

        var resetElement = document.querySelector('.reset');
        if (resetElement) {
            resetElement.addEventListener('click', function() {
                document.getElementById('typed')._typed.reset();
            });
        }

    });

    function newTyped() { /* A new typed object */ }
    function foo() {
        console.log("Callback");
    }
</script>

<div id="typed-strings">
  <span>Typed.js is a <strong>JavaScript</strong> library.</span>
  <p>It <em>types</em> out sentences.</p>
  <p>And then deletes them.</p>
  <p>Try it out!</p>
  <p>На этом все!</p>
</div>
<span id="typed" style="white-space:pre;"></span>

.typed-cursor{
opacity: 1;
font-weight: 100;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
-ms-animation: blink 0.7s infinite;
-o-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
@-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-ms-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-o-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
.typed-fade-out{
opacity: 0;
animation: 0;
transition: opacity .25s;
}

<link type="text/css" rel="stylesheet" href="d.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="d.js"></script>

<p class="danceWord-s2">
        Каждый веб-разработчик знает, что такое текст-«рыба».
</p>

<script type="text/javascript" src="shuffle-text.js"></script>
  <script>
    window.addEventListener('load', init);
    function init() {
      var effectList = [];
      var elementList = document.querySelectorAll('.my-effect');

      for (var i = 0; i < elementList.length; i++) {

        var element = elementList[i];
        element.dataset.index = i;

        effectList[i] = new ShuffleText(element);

        element.addEventListener('mouseenter', function () {
          effectList[+this.dataset.index].start();
        });

        element.addEventListener('mouseleave', function () {
          effectList[+this.dataset.index].start();
        });
        effectList[i].start();
      }
    }
 </script>

<ul>
        <li class="my-effect">2012/01/25 INDEX PAGE UPDATE.</li>
        <li class="my-effect">2012/01/20 NEWS PAGE UPDATE.</li>
        <li class="my-effect">2012/01/16 ABOUT PAGE UPDATE.</li>
        <li class="my-effect">2012/01/12 LAUNCHED.</li>
</ul>