.carousel {
 width: 1000px;
 height: 444px;
 display: flex;    /* 子要素を横に並べる */
 overflow: hidden; /* はみ出た部分は表示しない */
 margin: 0 auto;   /* 水平方向中央寄せ */
}
/* カルーセル内の画像 */
.carousel img {
 margin: 0;
 padding: 0;
 display: block; /* imgタグの改行のすき間を消すため */
}
/* スクロールアニメーションのキーフレーム */
@keyframes scroll {
 /* 初期位置は1個目の画像が左端 */
 0% { margin-left: 0; }      
 /* 1個分左の位置に進めて2個目の画像を左端にする */
 20% { margin-left: -100%; }
 /* 少しの間上と同じ位置 */  
 25% { margin-left: -100%; }
 /* 2個分左の位置に進めて3個目の画像を左端にする */
 45% { margin-left: -200%; }
 /* 少しの間上と同じ位置 */  
 50% { margin-left: -200%; }
 /* 以降は上と同様に繰り返し */
 70% { margin-left: -300%; }
 75% { margin-left: -300%; }
 95% { margin-left: -400%; }
 100% { margin-left: -400%; }
}
/* カルーセルの子要素にスクロールアニメーションを設定 */
.carousel > :first-child {
 animation-name: scroll;    /* キーフレーム名 */
 animation-duration: 30s;  /* 再生時間全体は20秒 */
 animation-delay: 0s;      /* 読込直後から遅延無しで開始 */
 animation-iteration-count: infinite;  /* 無限に繰り返す */
}

--></style>