CSSアニメーション 頭をフリフリするコードを書いてみた

noteで書く
アイ・クリエイト かおる です。 Webサイト動き(アニメーションなど)をつけると

さまざまなイメージを表現することができ、

「使いやすい!」「もっと見たい!」と思われるサイトになります。
今回はこのような

頭をフリフリさせるアニメーションをCSSで表現してみました!

頭をフリフリさせるコードの書き方

[ 1 ] 頭と体の画像を用意

こちらのアニメーションは2枚の画像からできています。

まずは2枚の画像を用意してください。 [ 2 ] 画像を表示させるコードをHTMLに記述 [ 3 ] CSSで配置、アニメーションをつける アニメーションのイメージはこちらです。↓↓↓
transform-origin: center bottom;

は上の画像のように

center bottom(ピンクの円)の部分を動きの原点とする記述です。 animation: furifuri 2s infinite;

は、アニメーションの名前が「furifuri」

アニメーション1回あたりの時間(秒)が「2s」

「infinite」は再生を無限に繰り返す、という意味になります。 あとは @keyframes furifuri に transform で回転の動きをつけるだけ。 思ったより簡単に作ることができました!

おわりに

動きのないサイトにも少し手間を加えるだけで、

印象をグッと良くすることができます!

CSSアニメーション、一度試してみてはいかがでしょうか。


最後まで閲覧いただき、ありがとうございました。

noteで書く

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です