今回は、”アニメーション設定：点滅”についてのご紹介。
以前、アニメーション設定にて、タイトルなどをスライドインさせるアニメーションを設定しました。
今回は、明滅させるアニメーションについてです。私のブログタイトルは、上記画像のようなネオンサインを意識していました。そして、ネオンサインのイメージといえば、ライトが切れかかった際に発生する光の明滅です。そんなイメージを表現できないかと思い、このアニメーションに辿り着きました。
CSSサンプル------------------------------------
/* 点滅 */
#title a{
opacity: 1;
-webkit-animation: flash 1s;
animation: flash 1s ; /*秒 */
}
@keyframes flash {
0%,100%{
opacity: 0;
}
0%{
opacity: 1;
color:#ffffff;
}
50%{
opacity: 1;
color:#0091EA;
}
-------------------------------------------------
こちらは、参考にした初期状態のCSSです。交互に設定した2色を入れ替えて点滅させる仕組みになってます。
これを元に、色々私なりに手を加えました。
☆光の明滅の速さを遅めに
☆数秒の間で明るい色・暗い色を並べる
そして完成したアニメーションが現在のブログタイトルに設定されています。結構、何秒単位の誤差を試行錯誤しました。私的には満足な出来に仕上がっていると思います。後、継続的に明滅させたい場合、”animation: flash 1s”の後ろに”linear infinite”を挿入するとループするようになります。
ちなみに、こんな感じにデコレーションして、ネオンの看板風にしたら雰囲気でますね。これで、部分的に色が変えれたらもっといいんだけど。
