/* これで動く前提の“最小構成”です
ポイント：
- animation は「#test 自体」ではなく、動かす中身（.marquee-track）に付ける
- .marquee-track を flex にして、幅を「中身に合わせて伸びる」ようにする
- 画像列は 2セット（計6枚）必要（CSSだけで継ぎ目なしにするため）
*/
#test{
overflow: hidden;
width: 100%;
}
#test .marquee-track{
display: flex;
flex-wrap: nowrap;
width: max-content;
will-change: transform;
animation: marquee 18s linear infinite;
}
#test img{
width: 40%;
height: auto;
flex: 0 0 auto; /* 画像を縮めない */
}
@keyframes marquee{
from{ transform: translateX(0); }
to{ transform: translateX(-50%); } /* 2セット並べたうちの1セット分 */
}