무한 롤링 배너 infinity rolling banner

<div class="roll">
    <div class="comp_roll">
        <ul id="mf_wq_uuid_200" class="recom_list grp_roll">
            <li><img src="/cm/images/matrix/img_reccom_01.svg"></li>
            <li><img src="/cm/images/matrix/img_reccom_02.svg"></li>
            <li><img src="/cm/images/matrix/img_reccom_03.svg"></li>
            <li><img src="/cm/images/matrix/img_reccom_01.svg"></li>
            <li><img src="/cm/images/matrix/img_reccom_02.svg"></li>
            <li><img src="/cm/images/matrix/img_reccom_03.svg"></li>
            <li><img src="/cm/images/matrix/img_reccom_01.svg"></li>
            <li><img src="/cm/images/matrix/img_reccom_02.svg"></li>
            <li><img src="/cm/images/matrix/img_reccom_03.svg"></li>
        </ul>
    </div>
</div>
<div class="roll">
    <div class="comp_roll">
        <ul id="mf_wq_uuid_200" class="recom_list grp_roll">
            <li><img src="/cm/images/matrix/img_reccom_01.svg"></li>
            <li><img src="/cm/images/matrix/img_reccom_02.svg"></li>
            <li><img src="/cm/images/matrix/img_reccom_03.svg"></li>
            <li><img src="/cm/images/matrix/img_reccom_01.svg"></li>
            <li><img src="/cm/images/matrix/img_reccom_02.svg"></li>
            <li><img src="/cm/images/matrix/img_reccom_03.svg"></li>
            <li><img src="/cm/images/matrix/img_reccom_01.svg"></li>
            <li><img src="/cm/images/matrix/img_reccom_02.svg"></li>
            <li><img src="/cm/images/matrix/img_reccom_03.svg"></li>
        </ul>
    </div>
</div>

.roll {overflow:hidden;position:relative;width:100%;height:44px}
.comp_roll {position:absolute}
.comp_roll .grp_roll {display:flex;align-items:center;flex-wrap:nowrap;white-space:nowrap;animation:rolling 30s linear infinite}
.roll+.roll {margin-top:8px}
.roll+.roll .grp_roll{animation:rolling2 30s linear infinite}

@keyframes rolling {
   0% {margin-left:0}
   100% {margin-left:-1250px}
}
@keyframes rolling2 {
   0% {margin-left:-1250px}
   100% {margin-left:0}
}