cssアニメーションで画像を常にプルプルさせる方法-webaby【エンジニアお父さんの育児・子育て】

ホームページ制作で唐突に言われることがあります。それが、「バナーを動かして目立たせてほしい」などです。

今まではホームページにアニメーションなどを使うことが少なく対応しているブラウザも少なかったのであまり動きがないサイトがほとんどでした。

ですが、最近はスマホやブラウザのバージョンも上がってきてアニメーションなどに対応したものがほとんどになっています。

そういった経緯もあり、バナーなどを揺らしたりして目立たせることができるようになってきています。

そんな、ちょっとした目立たせ方でよく使うのが、画像をプルプルとゆらす動きを付けます。

今回はcssの記述のみで画像や文字を簡単にプルプルと揺らす方法をご紹介します。

1. cssだけでプルプルと揺らす記述
2. プルプルと揺らすcssの解説
3. cssだけで記述することについて

cssだけでプルプルと揺らす記述

※上記の画像はhoverすると揺れるようにしています。

まずは、htmlに画像を記述し、クラス名をつけます。（画像を揺らす場合の記述例）

imgタグにクラス名を付けます。ここでは、puruと付けていますが任意でかまいません。

次にcssの記述を行います。先程、付けたクラス名に対する記述です。

この記述はコピペして使うことができますので、一度試してみてください。

プルプルと揺らすcssの解説

1行目～5行目にimgタグに指定したクラス名に対する記述です。

6行目～18行目がプルプルと揺らすアニメーションの記述になります。

ポイントは、2行目で揺れる時間を指定しています。これを短くすると揺れるというよりも震えるという感じに早く左右に動くようになります。

次に、3行目ですが、6行目～18行目のアニメーションをこのクラス名に適応するという記述になります。

3行目のanimation-name: purupuru;という記述で「purupuru」アニメーション名を指定しています。

そして6行目の@keyframes purupuruで「purupuru」指定しているので1行目～5行目と6行目～18行目が紐づけされた状態になります。

これにより、puruというクラス名が付いているものには、このアニメーションが適応されるようになります。

cssだけで記述することについて

jQueryなどを使ってアニメーションをしたりすることも多く、ホームページで動的にコンテンツを動かしたりすることはよくあります。

ですが、出来る限りcssでできることはcssで対処するようにするといろいろな状況でも動かすことができます。また、記述も短いものであればcssでの記述をオススメします。

今回は、その中でも簡単なアニメーションをご紹介しました。ぜひ、一度試してみて下さい。