先生のを参考にやってますが、うまくいきません。手書きしてましたけど上手くいかないので、
とりあえず、一回コピペで試してみましたが、うまくいきません。
http://nobu-69.com/manakaa/sample2/
３枚目の画像の後に謎の空白時間があります。

現在の理解度

/*cssでスライドショー*/

クロスフェードするものの大外枠です。widthを切れば画面いっぱいに表示されます。
#bg_header{
margin:0 auto;
width:900px;
}

高さ指定は必須。指定しないと、場所が確保されないので。
画像は縦に３つ並びます。overflow:hidden;であふれた分を隠します。
.slider{
height:400px;
position:relative;
overflow:hidden;
}

各画像をabsolute the butcherで同じ位置に重ねる。
.slider img {
position:absolute;
width:100%;
}

opacity:0;で完全に透明にする。キーフレーム名（必須）をつける、overwrapとする。（任意の名前でいい）
２４ｓは２４秒という意味。何が２４ｓなのでしょう？easeはイージング。infiniteは永遠に。
.slider img {
opacity:0;
animation:overwrap 24s ease infinite;
}

nth-of-type(1)は一枚目という意味かな？一枚目のディレイが0なのは、
すぐに表示させたいから。２枚目は４秒後に出現。３枚目は８秒後に出現。
.slider img:nth-of-type(1) {
animation-delay:0;
}
.slider img:nth-of-type(2) {
animation-delay:4s;
}
.slider img:nth-of-type(3) {
animation-delay:8s;
}

overwrapと名前をつけたキーフレームに色々と指定を書く。
ここが良く分からないです。
スライドショーの柿のやつの黒板の説明みたけど、？です。
難しいです。
@keyframes overwrap {
0% {opacity:0;z-index:10;}
5%,30% {opacity:1;}
44% {opacity:0;z-index:-1;}
45%,100% {opacity:0;z-index:-1;}
}

よろしくお願いします。