<div class="container">
            <div class="slide">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, dicta, soluta neque commodi earum esse minima beatae animi debitis officiis aut fuga voluptatem autem facilis dolorem quae cumque quam praesentium!</div>
            <div class="slide">Possimus, asperiores, repellendus, dolore quidem ducimus voluptatum exercitationem maxime mollitia ea repellat iste ipsum quas cumque. Accusamus, cupiditate, aperiam nesciunt pariatur aut adipisci facilis soluta eum corporis incidunt dolorum quas.</div>
            <div class="slide">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, eos, sit quam perferendis dicta sunt reiciendis nostrum autem nesciunt ex numquam quasi exercitationem officia veniam rerum accusamus alias voluptate adipisci!</div>
</div>
.container {
    width: 500px;
    margin: 50px auto;
    font-size: 25px;
    font-family:monospace;
}
.slide {
    display: none;
}
.slide:first-child {
    display: block;
}
.slide .char {
    animation-delay: 0s, 1.25s;
}
.slide span.front, .slide span.back {
    overflow: hidden;
    display: inline-block;
    white-space:pre;
    backface-visibility: hidden;
}
.slide span.front {
    animation: rotation-animation-front 1s forwards, hide-animation 0.01s forwards;
}
.slide span.back {
    width: 0px;
    transform: rotateX(90deg);
    animation: rotation-animation-back 1s forwards, show-animation 0.01s forwards;
}

@keyframes rotation-animation-front {
    to {
        transform: rotateX(90deg);
    }
}
@keyframes rotation-animation-back {
    to {
        transform: rotateX(0deg);
    }
}
@keyframes hide-animation {
    to {
        width: 0px;
    }
}
@keyframes show-animation {
    to {
        width: auto;
    }
}
config = {
    timeout: 2000,
    speed: 250,
    spread: 20
}

var currentSlide = 0,
    nextSlide = 0,
    output = '',
    characters = [],
    maxChars,
    slides,
    slidesTexts;

callback = function ()  {
    if (currentSlide++ >= slides.length - 1) currentSlide = 0;
    setTimeout(formatText, config.timeout);
}

formatText = function () {

    // calculate the next slide index
    nextSlide = (currentSlide + 1 >= slides.length) ? 0 : currentSlide + 1;

    // Fill the characters array if not already defined
    if (characters[currentSlide] == undefined) characters[currentSlide] = slides[currentSlide].innerHTML.split('');
    if (characters[nextSlide] == undefined) characters[nextSlide] = slides[nextSlide].innerHTML.split('');

    maxChars = Math.max(characters[currentSlide].length, characters[nextSlide].length);

    var fragment = document.createDocumentFragment();

    for (var i = 0; i < maxChars; ++i) {

        // create all elements

        var duration = config.speed / 1000;
        var delay = i * (config.speed / 1000 / config.spread);

        var front = document.createElement("span");
        front.className = "front";
        var styleFront = '-webkit-animation-delay: ' + delay + 's, ' + (delay + duration) + 's; -webkit-animation-duration: ' + duration + 's, 0.01s;' + '-moz-animation-delay: ' + delay + 's, ' + (delay + duration) + 's; -moz-animation-duration: ' + duration + 's, 0.01s;';

        front.setAttribute('style', styleFront);
        front.innerHTML = characters[currentSlide][i] || ' ';

        var back = document.createElement("span");
        back.className = "back";
        var styleBack = '-webkit-animation-delay: ' + (delay + duration) + 's, ' + (delay + duration) + 's; -webkit-animation-duration: ' + duration + 's, 0.01s;' + '-moz-animation-delay: ' + (delay + duration) + 's, ' + (delay + duration) + 's; -moz-animation-duration: ' + duration + 's, 0.01s';
        back.setAttribute('style', styleBack);
        back.innerHTML = characters[nextSlide][i] || ' ';

        var char = document.createElement("span");
        char.className = "char";
        char.appendChild(front)
        char.appendChild(back);
        fragment.appendChild(char);
    }

    setTimeout(function () {
        callback();
    }, maxChars * (config.speed / config.spread) + config.speed);

    slides[0].innerHTML = "";
    slides[0].appendChild(fragment);
};

slides = document.getElementsByClassName('slide');
currentSlide = 0;
nextSlide = 1;
formatText();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.