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

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

準備するもの

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

元の画像↓

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

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

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;
}

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

こんな状態↓

あとはCSSでアニメーションをつけてあげるだけだ。
最初に表示させて画像が切り替わる時にパッと消したかったので、少し刻んで％を指定している。今回は画像が３枚だったため、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