ポイント
画像の枚数とアニメーションにかける時間によって実装をしよう！
実装の仕方が少し変わるから気をつけよう！
index.html
<divclass="main-slide"><imgsrc="images/pic00.png"alt=""><imgsrc="images/pic01.png"alt=""><imgsrc="images/pic02.png"alt=""></div>style.css
*{padding:0;margin:0;}.main-slide{width:100%;height:100%;top:0;left:0;}.main-slideimg{width:100%;height:auto;position:absolute;top:0;left:0;opacity:0;animation:slide-animation24slinearinfinite0s;}.main-slideimg{height:auto;}.main-slideimg:nth-of-type(2){animation-delay:8s;/*2枚目の開始時間*/}.main-slideimg:nth-of-type(3){animation-delay:16s;/*3枚目の開始時間*/}@keyframesslide-animation{0%{animation-timing-function:ease-in;/*ゆっくり表示される*/opacity:0;}12%{animation-timing-function:ease-out;/*表示された*/opacity:1;}30%{opacity:1;/*＊表示期間*/}43%{opacity:0;/*次の画像で消えている*/}100%{opacity:0;/*表示されていない時間*/}}