cssのみで画像をキラーンと光らすアニメーションをご紹介-webaby【エンジニアお父さんの育児・子育て】

先日、バナーなどを揺らす方法をご紹介しましたが、今回は画像をキラーンと光ったように見せるアニメーションをご紹介します。

コンテンツなどを光らせたりするのに色々な方法があります。もちろんcssだけで記述を済ませるものからjQueryを使うものまでたくさんありますが、今回は私もたまに使うアニメーションをご紹介します。

私もたまに使う程度なので、このブログに方法を記述してすぐに見れるようにしておきたいのもあります（笑）

1. キラーンと光る画像のサンプル
2. 画像をキラーンと光らす記述方法
3. cssでキラーンとアニメーションをする際の注意点

キラーンと光る画像のサンプル

まずはこちらの画像がサンプルになります。

画像をキラーンと光らす記述方法

まずはhtmlの記述方法がこちらです。

1行目にキラーンと光らせる範囲のクラス名を記述します。次にそのクラス名内に3行目を必ず記述してください。

これによりキラーンと光らせることができます。

次にcssの記述がこちらです。

長々と記述していますが、ほとんどは対応できないブラウザに対しての記述なのでコピペで使用することができます。

光らせ方は大きさなどは6行目以降をカスタマイズすればお好みのキラーンができます。

今回は、詳細な説明は記載せずに注意点だけ必ず読むようにしてください。

cssでキラーンとアニメーションをする際の注意点

まず、htmlに記載する場合は、必ずkiran-imgというクラス名を付けたタグ内に<div class=”kiran”></div>を記述するようにしてください。これがタグ外に記載しているとアニメーションは動きません。

つぎに、いろいろなブラウザでアニメーションが動くようにcssを記述していますが、ブラウザによっては動かなかったり、動作がおかしかったりする場合もあるかもしれません。

ですから、使用する際は必ずブラウザ確認をするようにしてください。

上記の注意点を読んだ上で、使ってみてはいかがですか？いつものコーディングから少し遊び心をつけるとコーディングも楽しくなってきます。ぜひ、試してみて下さい。