SOURCE

<div class="data-screen-left2-legend">
	<div class="data-screen-left2-legend-item" id="data-screen-left2-legend-item-1">
		<span>五项联考</span><i style="background: rgb(49, 61, 237)"></i>
    </div>
    <div class="data-screen-left2-legend-item" id="data-screen-left2-legend-item-2">
        <span>侧方停车</span><i style="background: rgb(0, 80, 199)"></i>
    </div>
    <div class="data-screen-left2-legend-item" id="data-screen-left2-legend-item-3">
        <span>倒车入库</span><i style="background: rgb(10, 68, 174)"></i>
    </div>
    <div class="data-screen-left2-legend-item" id="data-screen-left2-legend-item-4">
        <span>沧州狮城考场</span><i style="background: rgb(0, 164, 199)"></i>
    </div>
    <div class="data-screen-left2-legend-item" id="data-screen-left2-legend-item-5">
        <span>曲线行驶</span><i style="background: rgb(151, 189, 0)"></i>
    </div>
    <div class="data-screen-left2-legend-item" id="data-screen-left2-legend-item-6">
        <span>坡道定点停车和起步</span><i style="background: rgb(222, 128, 0)"></i>
    </div>
    <div class="data-screen-left2-legend-item" id="data-screen-left2-legend-item-7">
        <span>沧州恒晟考场</span><i style="background: rgb(197, 31, 38)"></i>
    </div>
    <div class="data-screen-left2-legend-item" id="data-screen-left2-legend-item-8">
        <span>泊头狮城考场</span><i style="background: rgb(207, 199, 0)"></i>
    </div>
    <div class="data-screen-left2-legend-item" id="data-screen-left2-legend-item-9">
        <span>南大港驰骋考场</span><i style="background: rgb(233, 129, 54)"></i>
    </div>
    <div class="data-screen-left2-legend-item" id="data-screen-left2-legend-item-10">
        <span>献县职教考场</span><i style="background: rgb(234, 63, 70)"></i>
    </div>
    <div class="data-screen-left2-legend-item" id="data-screen-left2-legend-item-11">
        <span>直角转弯</span><i style="background: rgb(64, 53, 192)"></i>
    </div>
    <div class="data-screen-left2-legend-item" id="data-screen-left2-legend-item-12">
        <span>青县金帝考场</span><i style="background: rgb(0, 103, 199)"></i>
    </div>
    <div class="data-screen-left2-legend-item" id="data-screen-left2-legend-item-13">
        <span>南皮华骏考场</span><i style="background: rgb(27, 81, 179)"></i>
    </div>
    <div class="data-screen-left2-legend-item" id="data-screen-left2-legend-item-14">
        <span>泊头赤诚考场</span><i style="background: rgb(0, 140, 199)"></i>
    </div>
</div>

.data-screen-left2-legend {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    width: 90vw;
    margin: 20px;
    /* overflow: hidden; */
    /* overflow-x: scroll; */
}

.data-screen-left2-legend:hover {
    animation-play-state: paused;
}


/* 鼠标悬停时停止动画 */

.data-screen-left2-legend:hover  {
    animation-play-state: paused;
}


/* 动画效果 */

@keyframes slide {
    0% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-30%);
    }
    40% {
        transform: translateX(-50%);
    }
    60% {
        transform: translateX(-70%);
    }
    80% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

.data-screen-left2-legend {
    animation: slide 20s infinite;
    /* 根据需要调整时间 */
}

.data-screen-left2-legend-item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 6px;
    /* transition: transform 0.5s ease-in-out; */
}

.data-screen-left2-legend-item span {
    display: block;
    margin-right: 6px;
    font-size: 12px;
    white-space: nowrap;
}

.data-screen-left2-legend-item i {
    display: block;
    width: 10px;
    height: 2px;
}