@import url('https://fonts.googleapis.com/css?family=Roboto:300');
.div {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
}

.div:first-of-type {
    /* For increasing performance 
                       ID/Class should've been used. 
                       For a small demo 
                       it's okaish for now */
    animation: showup 7s infinite;
}

.div:last-of-type {
    width: 0px;
    animation: reveal 7s infinite;
}

.div:last-of-type span {
    margin-left: -400px;
    animation: slidein 7s infinite;
}

@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: 400px;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        width: 400px;
    }
}