가로로 무한 흐르기

<div class="row_wrap">
    <div class="row_content">
        <div class="row1 row">
            <h2>WE ARE DIFFERENT.</h2>
            <h2>WE ARE DIFFERENT.</h2>
            <h2>WE ARE DIFFERENT.</h2>
            <h2>WE ARE DIFFERENT.</h2>
            <h2>WE ARE DIFFERENT.</h2>
            <h2>WE ARE DIFFERENT.</h2>
            <h2>WE ARE DIFFERENT.</h2>
        </div>
        <div class="row2 row">
            <h2>WE ARE DIFFERENT.</h2>
            <h2>WE ARE DIFFERENT.</h2>
            <h2>WE ARE DIFFERENT.</h2>
            <h2>WE ARE DIFFERENT.</h2>
            <h2>WE ARE DIFFERENT.</h2>
            <h2>WE ARE DIFFERENT.</h2>
            <h2>WE ARE DIFFERENT.</h2>
        </div>
    </div>
    <div class="row_content2">
        <div class="row1 row">
            <h2>WE ARE DIFFERENT.</h2>
            <h2>WE ARE DIFFERENT.</h2>
            <h2>WE ARE DIFFERENT.</h2>
            <h2>WE ARE DIFFERENT.</h2>
            <h2>WE ARE DIFFERENT.</h2>
            <h2>WE ARE DIFFERENT.</h2>
            <h2>WE ARE DIFFERENT.</h2>
        </div>
        <div class="row2 row">
            <h2>WE ARE DIFFERENT.</h2>
            <h2>WE ARE DIFFERENT.</h2>
            <h2>WE ARE DIFFERENT.</h2>
            <h2>WE ARE DIFFERENT.</h2>
            <h2>WE ARE DIFFERENT.</h2>
            <h2>WE ARE DIFFERENT.</h2>
            <h2>WE ARE DIFFERENT.</h2>
        </div>
    </div>
</div>

 

---

 

.row_wrap{margin-bottom: 50px; width: 100%; overflow: hidden;}
.row_content { display: flex;  animation: row 15s linear infinite; }
.row_content .row{display: flex; }
.row_content .row h2{font-size: 9.0rem; white-space: nowrap; color: #f1f2f5; font-weight: 900;}
.row_content2 { display: flex;   animation: row2 15s linear infinite; }
.row_content2 .row{display: flex; }
.row_content2 .row h2{color:transparent ; -webkit-text-stroke: 1px #f1f2f5; font-size: 9.0rem; white-space: nowrap; font-weight: 900;}

@keyframes row {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes row2 {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0%);
    }
}