見出し画像

CSSアニメーションを使ってまばたきをさせてみる

玉子豆腐

前回のおまけみたいなもの。CSSアニメーションもいろいろ触ってみたかったので、まばたきするアニメーションを作ってみた。

準備するもの

元の画像と動かしたいもの。動かしたいものは透過pngにしておく。

元の画像↓

画像1

今回動かしたいのは目の部分なので、目を開けた状態と閉じた状態の透過画像を用意した。

画像2

画像3

この時、画像サイズを揃えておくと楽に重ねることができる。

CSSアニメーションを使ってみよう

まずはHTMLに元の画像と目の画像2つをそれぞれ書いておく。開けた状態だけ少し長めにしたかったので、2つ書いている。

<img src="元の画像URL" />
<img src="目を開けた状態の画像URL" id="eye1" class="eye"/>
<img src="目を開けた状態の画像URL" id="eye2" class="eye"/>
<img src="目を閉じた状態の画像URL" id="eye3" class="eye"/>

次にCSSで画像と目を重ねてあげる。

.eye {
    position: absolute;
    left: 0;
    top: 0;
}

これで全ての画像が重なった。

こんな状態↓

スクリーンショット 2020-04-13 0.00.06

あとはCSSでアニメーションをつけてあげるだけだ。
最初に表示させて画像が切り替わる時にパッと消したかったので、少し刻んで%を指定している。今回は画像が3枚だったため、1画像当たり約33%だが、保険をかけて34%と35%で画像のopaicityを切り替えるようにした。

.eye {
    position: absolute;
    left: 0;
    top: 0;

    //新しく加えたところ
    animation: blink_anime 1.2s infinite;
    opacity: 0;
}
@keyframes blink_anime {
    0% {
        opacity: 1;
    }
    34% {
        opacity: 1;
    }
    35% {
        opacity: 0;
    }
}

#eye2 {
    animation-delay: 0.4s;
}
#eye3 {
    animation-delay: 0.8s;
}

完成

最後に、前回の髪の色を変えるコードと組み合わせた。まばたきを1.2秒ペースで繰り返すため、2回まばたきするごとに髪色が変わるようになっている。

まとめ

CSSアニメーション、やはり難しい。keyframeで特につまづいて、同じ画像を2枚表示させると言う無理矢理な方法を取ってしまった。もっとCSS(とSVG )の勉強をして、いろいろなアニメーションを実装したい。

参考記事

https://www.saaria.info/archives/2285#toc1

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
玉子豆腐
社会人3年生