福岡市のホームページ制作・SEO対策のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

これだけ覚えれば簡単!CSSアニメーション作成はじめの一歩

| カテゴリー : HTML/CSS

こんにちは、福岡のホームページ制作アイドットデザインのちゃんけいです!

CSSアニメーションはJavaScriptを使わないため実装が容易です。

仕組みを理解すれば簡単なアニメーションを作ることができるのでとても便利です。
使うプロパティは大まかに2つ

  • @keyframes
  • animation

今回の記事でこちらのような「divで作った箱を横に移動する」アニメーションを作れるようになりましょう。(CodePenがうまく表示されなかったらブラウザでページの更新をしてみてください)

See the Pen simple CSS animation by Chankei (@Chankei) on CodePen.

CSSアニメーションを使うとできること

まずはCSSアニメーションを使うとどんなことができるのか、イメージを掴んでいただくために実際に私が作ったものをご紹介いたします。

こちらは以前、2017年エイプリルフール企画の際に使ったローディングアニメーション。
テキストの背景を無限にスクロールさせています。

アイドットデザイン採用サイトで使用しているローディングアニメーション。
擬似要素を使って、4本の線がずっと回っているように見せている。

個人的に作ったネオン菅っぽいアニメーション。

「こんなことができるんだ!」というイメージをつかむことはできましたか?
では詳しく作り方を見ていきましょう。

@keyframesの使い方

@keyframesを使うことで、アニメーションの開始から終了までの変化が起きる通過点(キーフレーム)を指定することができます。

必ず始めと終わりを表す0%,100%またはfrom,toを書く必要があり、こちらが書かれていない場合アニメーションが使用できません。

名前の部分を使って、後でanimationに指定するのでお忘れないように。

animationプロパティ

先ほど作った@keyframesを含めて、細かいアニメーションの動作を設定していきます。

今からanimationの様々なプロパティを説明しますが、それらをまとめて設定できる短縮プロパティが、animationになります。

1つ1つが何を設定しているかを理解すれば表現の幅が広がります。詳しい説明はこちらページでご確認ください。

animation – CSS | MDN

今回使用するのはこちらのプロパティです。

animation-duration

1 回のアニメーション周期( 0% ~ 100% )が完了するまでにかかる時間を指定

初期値:animation-duration: 0s

animation-timing-function

アニメーションのイージングを指定。

初期値:animation-timing-function: ease

animation-iteration-count

アニメーションの1周期を1回として、何回繰り返すかを指定。
infiniteと書けば無限に繰り返す。

初期値:animation-iteration-count: 1

animation-name

keyframesで設定した名前を指定。

初期値:animation-name: none

animation

上記の全てのプロパティをまとめて設定することができます。

実際に作ってみる

では実際に作っていきましょう。
まずはHTMLと簡単な見た目のCSS、divの箱を一つ用意します。

これで紫色の箱ができました。次にとっても簡単なCSSアニメーションを書いていきましょう!

まずは、動きの指定をします。

次にanimationの設定をします。値を変えてみて動きがどう変わるか試してみてください。

まとめて、この一行でもOKです。

さて!これでアニメーションが作成できましたね!素敵です!

まとめ

いかがでしたでしょうか。CSSを使うと簡単なアニメーションでしたらすぐに実装することができ、少し難しいことも視点を変えるとCSSアニメーションで作ることができます。

JavaScriptと組み合わせることでさらに表現の幅が広がるので、CSSアニメーションができるようになったら次はJavaScriptで制御してみましょう。

CSSアニメーションの勉強には、animate.cssの中身をみるととても参考になります。

https://github.com/daneden/animate.css

それではみなさまの良きCSSライフを!

参考記事

ホームページ制作はもちろん、ブログ・SNSの運用やコンテンツ企画もお任せください。

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。