/*html,
body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F7DCAD;
}*/

.box {
    display: flex;
    padding-left:0
}

    .box .inner {
        width: 200px;
        height: 80px;
        line-height: 80px;
        font-size: 2em;
        font-family: sans-serif;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
    }

        .box .inner:first-child {
            background-color: #EBD89E;
            color: #B6381F;
            transform-origin: right;
            transform: perspective(100px) rotateY(-15deg);
        }

        .box .inner:last-child {
            background-color: #CA5100;
            color: antiquewhite;
            transform-origin: left;
            transform: perspective(100px) rotateY(15deg);
        }

        .box .inner span {
            position: absolute;
            animation: marquee 5s linear infinite;
        }

        .box .inner:first-child span {
            animation-delay: 2.5s;
            left: -100%;
        }

@keyframes marquee {
    from {
        left: 100%;
    }

    to {
        left: -100%;
    }
}