ヘッダ画像をスライド表示するCSS

目的

muragonのカスタマイズ。
ヘッダ画像をスライド表示する。20秒で3枚の右→左に移動しながら画像を切り替える。

ヘッダ画像の例を以下に示す。ヘッダ幅970pxの画像を3枚繋げた画像(計2910px幅)とする。

同様に、20秒で3枚の下→上に移動しながら画像を切り替える。

CSS

.blog-header-inner {
height : 高さ;
background : url(ヘッダ画像);
animation : slide 20s linear infinite;
}

/* 右→左に移動 */
@keyframes slide {
0%,33% {
background-position : 0 0;
}
34%,66% {
background-position : -970px 0;
}
67%,99% {
background-position : -1940px 0;
}
100% {
background-position : -2910px 0;
}
}
/* 下→上に移動 */
@keyframes slide {
0%,33% {
background-position : 0 0;
}
34%,66% {
background-position : 0 -300px;
}
67%,99% {
background-position : 0 -600px;
}
100% {
background-position : 0 -900px;
}
}