.intro {
    display: inline-block;
    overflow: hidden;
    white-space: normal;
    font-size: 15px;
}

    .intro:first-of-type {
        animation: showup 7s infinite;
    }

    .intro ~ .intro {
        width: 100%;
        animation: reveal 7s infinite;
        white-space: normal;
    }

        .intro ~ .intro span {
            margin-left: -355px;
            animation: slidein 7s infinite;
            white-space: normal;
        }

@keyframes showup {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes slidein {
    0% {
        margin-left: -800px;
    }

    20% {
        margin-left: -800px;
    }

    35% {
        margin-left: 0px;
    }

    100% {
        margin-left: 0px;
    }
}

@keyframes reveal {
    0% {
        opacity: 0;
        width: 0px;
    }

    20% {
        opacity: 1;
        width: 0px;
    }

    30% {
        width: 100%;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        width: 100%;
    }
}