CSSでアニメ―ションを表現する - Webデザイン勉強ブログ

最近よく見かけるトップページのアイキャッチ画像が自動で切り替わるアニメーションを実装したく、チャレンジしてみました。

理想はこちらのサイト

さすがにここまでは無理ですが、上記のサイトのようにふわ～っと画像が切り替わるものが理想です。

でもjQueryはまだまったく触れたことがないのでCSSでできないものかと思いググってみたところできるようですね。

CSSってどこまでできるんだろ・・・

HTMLの記述

            <div class="eyecatch-photo">
                <img class="img1" src="images/dark-top-dougo-onsen.jpg">
                <img class="img2" src="images/dark-garyusansou.jpg">
                <img class="img3" src="images/dark-oomishimabgidge.jpg">
                <img class="img4" src="images/dark-shimonada.jpg">
            </div>

4枚のアニメーションにしたかったので画像を4枚用意しました。

HTMLの記述はこれだけ。

CSSの記述

①

画像4枚を同じ場所に表示させるため親要素にposition: relative; を。

（アニメーションに関係ないCSSもあります。）

.eyecatch-photo {
    width: 100%;
    height: 800px;
    background-color: rgba(0, 0, 0, 0.5);
    position: relative;
}

②

4枚の画像に高さを付けるためdisplay: block;

縦横比を維持したまま親要素いっぱいに表示させるためobject-fit: cover;

同じ位置に表示させるためposirion: absolute;とtop: 0; right: 0; を。

.eyecatch-photo img {
    width: 100%;
    height: 800px;
    display: block;
    object-fit: cover;    
    position: absolute;
    top: 0;
    right: 0;
}

③

アニメーションの動きを@keyframesで指定

今回は4枚の画像だったので、画像一枚当たりのアニメーションは全体の4分の1（＝25％）。

アニメーションの最初と最後（0％と100％）ではopacity: 0;にして透明、その間（8.3％と20％では1に設定しふわっと画像が表示され、消えるように。

もし1％ {opacity: 1;} にすればもっと表示される速度が速くなります。

@keyframes eyecatch-photo {
    0% {
        opacity: 0;
    }
    8.3% {
        opacity: 1;
    }
    20% {
         opacity: 1;
    }
    25% {
        opacity: 0;
    }
}

④

animation-name で呼び出すkeyframeの名前を指定

animariton-duration でアニメーション全体（4枚の画像が表示され終わるまで）の時間を指定

animation-iteration-countで繰り返しの回数を指定（infiniteはずっと繰り返し。）

.eyecatch-photo img {
    animation-name: eyecatch-photo;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    opacity: 0;
}

⑤

animation-delayで画像それぞれのアニメーションが始まるタイミングを調整。

画像を順番に表示→消えるを繰り返したいのでアニメーション全体の20秒を4枚で割り、5秒ずつ表示させるタイミングをずらします。

.eyecatch-photo .img1 {
    animation-delay: 0s;
}
.eyecatch-photo .img2 {
    animation-delay: 5s;
}
.eyecatch-photo .img3 {
    animation-delay: 10s;
}
.eyecatch-photo .img4 {
    animation-delay: 15s;
}

以上！

このブログを書くために半日前に書いたコードを見返したのですが、無駄なコードが多く、少しはきれいにしつつブログを書いたのでちょっとはましになったかな・・・？

ただ分からなかったこと、できなかったことが2つ！

画像の切り替えが「画像を消す→表示する」の繰り返しなので切り替えのタイミングで画像が消えるため背景が見えてしまう
アニメーションの上から黒いフィルターをかけるようにしたかったができなかったためphotoshopで画像を全て暗く加工

こちらが上記のHTMLとCSSの結果です。

CSSでのアニメーション効果

う～難しい・・・！

今回参考にさせていただいたサイトはこちらです。