*{
    box-sizing: border-box;
}

.smooth-image {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.smooth-image::before,
.smooth-image::after{
    content: '';
    width: 96px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #fff 84%);
    z-index: 5;
}

.smooth-image::after{
    left: auto;
    right: 0;
    transform: rotate(180deg)
}

.smooth-image .image-track {
    display: flex;
    animation: scrollLeft 20s linear infinite;
}

.smooth-image .smooth-image--item{
    min-width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 20px;
}

.smooth-image .smooth-image--item img {
    min-height: 32px;
}

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