CSS だけでスライドショー

作り方

制限を緩めて作ることも当然可能なのですが説明をシンプルにするために、画像の形は正方形限定です。サイズに関しては制限はないですが width、height 属性はあった方がいいのでそろえた方が楽に HTML をかけると思います。画像の枚数も制限を付けて8枚です。

HTML

<div class="photo-show">
    <img src="画像のURL">
    <img src="画像のURL">
    <img src="画像のURL">
    <img src="画像のURL">
    <img src="画像のURL">
    <img src="画像のURL">
    <img src="画像のURL">
    <img src="画像のURL">
</div>

必要最低限の記述です。img タグに width、height、alt 属性を付けたい場合はそれぞれに付け足してください。

CSS

.photo-show { 
    height: 440px; /*表示したい大きさ*/
    margin: 30px auto; /*縦余白30pxは任意*/
    max-width: 100%;
    position: relative;
    width: 440px; /*表示したい大きさ、height と合わせる*/
}

.photo-show img { 
    animation: show 16s infinite;
    -webkit-animation: show 16s infinite;
    border-radius: 50%;
    height: auto;
    max-width: 100%;
    opacity: 0;
    position: absolute; /*画像を全て重ねる*/
}

/*アニメーション*/

@keyframes show {
    0% {opacity:0}
    5% {opacity:1}
    10% {opacity:1}
    20% {opacity:0}
 }

@-webkit-keyframes show {
    0% {opacity:0}
    5% {opacity:1}
    10% {opacity:1}
    20% {opacity:0}
}

/*各画像のアニメーションの開始時間をずらす*/

.photo-show img:nth-of-type(1) {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
}

.photo-show img:nth-of-type(2) {
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
}

.photo-show img:nth-of-type(3) {
    animation-delay: 4s;
    -webkit-animation-delay: 4s;
}

.photo-show img:nth-of-type(4) {
    animation-delay: 6s;
    -webkit-animation-delay: 6s;
}

.photo-show img:nth-of-type(5) {
    animation-delay: 8s;
    -webkit-animation-delay: 8s
}

.photo-show img:nth-of-type(6) {
    animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

.photo-show img:nth-of-type(7) {
    animation-delay: 12s;
    -webkit-animation-delay: 12s;
} 
.photo-show img:nth-of-type(8) {
    animation-delay: 14s;
    -webkit-animation-delay: 14s;
}

/*マウスが画像に重なった際、動きを止めて四角くする*/

.photo-show img {
    transition: 0.2s;
    -webkit-transition: 0.2s;
}

.photo-show:hover img {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
    border-radius: 0;
}

一応、古めの Safari を考慮して -webkit- ベンダープレフィクスを付けていますが、最新版ではいらないのでなくても構いません。

マウスカーソルが重なった際に動きが止まるように、animation-play-state というプロパティを使っています。

スポンサーリンク

デモ

フェイドイン・フェイドアウトで切り替わる様子がわかります。マウスカーソルを重ねることでアニメーションが止まる四角い画像になるようにしています。ではなぜ上記の CSS でスライドショーになるかというのを下で説明してみます。

何故スライドショーになるのか

あえて画像を重ねずに表示すると上のようになります。アニメーションの出たり消えたりするリズム自体は全ての画像同じですが、アニメーションのスタートする時間が異なるのがわかるかと思います。nth-of-type 疑似セレクタを使う事で各画像のアニメーション開始時間をずらしています。時間をずらしているものを重ねることでスライドショーのように見せています。