CSS 背景色をアニメーションさせてみる

文字で書いてもわかりにくいと思うので、作ったものを埋め込んでみます。

さて、何をしているかというと、

html

CSS

こんな感じになってます。

idの#color部分は、背景いっぱいにdivを広げるための設定だけで、背景の色を変える部分は.colorの部分がやっています。
ちなみに、divを背景いっぱいに広げたい時、単純に、width,heightを100%にするだけでは幅は100%になっても高さがそうなりません。heightの初期設定はautoになっており、親の要素の高さが目安になっているためです。なので、html,body共に高さを100%にしておけば、その中のdivの高さはwidth,height:100%で目一杯広がるはずです。

まず、あまりCSSに馴染みがない人はkeyframesも馴染みがないと思います。また@-webkit-keyframesと@keyframesと2つあることも疑問に感じるでしょう。この@マークの後の-webkit-とは、ベンダープレフィックスと言いまして、webkitを利用するブラウザに向けての設定が書かれています。正式にブラウザにkeyframesが採用された場合は@keyframesで良いわけですが、とりあえず機能としては搭載しておこうと言う感じのものについてはこのベンダープレフィックスが付きます。

今日現在keyframesが正式に対応しているかどうかは知りませんが、まぁ書いておけばよいのではないかと(笑)

一応対応していないかもしれないwebkit向けと、対応しているであろう他のブラウザとを分けてあるだけで表示する内容は同じですから、その設定も同じになります。
アニメーションの段階が0から100%でどのように変化するかを任意の背景色として設定してあります。
この設定は、.colorの部分で読み込まれます。

animation: bg-color 10s infinite;
-webkit-animation: bg-color 10s infinite;

この部分がそうです。これもwebkit用とそうでないもの用に2つ用意してあります。
@keyframes bg-colorのようにkeyframesの後ろに、識別名を入れておきます。ここは何でも構いません。その識別名を.colorのanimationのパラメーターとして使います。

こんな感じです。

さて、背景色をアニメーションさせるというのは、これでだいたいわかってもらえたと思いますが、単純に色が自動で変わってもあまり面白くありません。なので、例えば背景に写真を表示して、その上にこの色の変わる設定を持ってきて透過させるというのはどうでしょう?
例ではわかりやすいようにはっきりとした色をアニメーションさせていますが、同色で薄くなったり濃くなったりとか、あるいはグレー系とかアイデア次第で比較的軽く写真を効果的に魅せる事ができるのではないでしょうか?

あるいは、ボタンや文字の色とか試してないので知りませんが、多分できるんじゃないかなぁと。
gifアニメーションで作っても良いけれど、手間がかかる上に変更したい時にパッとできないのが玉に瑕。そんな時はcssでなんとか・・・ってのは便利なものです。

スポンサーリンク

シェアする

フォローする