これだけ覚えれば簡単!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に指定するのでお忘れないように。
1 2 3 4 5 6 7 8 | @keyframes 名前 { 0%{ width: 0%; } 100%{ width: 100%; } } |
animationプロパティ
先ほど作った@keyframesを含めて、細かいアニメーションの動作を設定していきます。
今からanimationの様々なプロパティを説明しますが、それらをまとめて設定できる短縮プロパティが、animationになります。
1つ1つが何を設定しているかを理解すれば表現の幅が広がります。詳しい説明はこちらページでご確認ください。
今回使用するのはこちらのプロパティです。
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の箱を一つ用意します。
1 | <div class="box"></div> |
1 2 3 4 5 | .box{ width: 100px; height: 100px; background: #c352c5; } |
これで紫色の箱ができました。次にとっても簡単なCSSアニメーションを書いていきましょう!
まずは、動きの指定をします。
1 2 3 4 | @keyframes moveX { from { margin-left: 0px; } // はじめの値 to { margin-left: 300px; } // 動いたあとの値 } |
次にanimationの設定をします。値を変えてみて動きがどう変わるか試してみてください。
1 2 3 4 5 6 | .box{ animation-duration: 3s; // アニメーションの時間 animation-timing-function: linear; // イージングの設定 animation-iteration-count: infinite; // 周期、何回繰り返すか animation-name: moveX; // @keyframeの指定 } |
まとめて、この一行でもOKです。
1 2 3 | .box{ animation: 3s linear infinite moveX; // この一行でもOK } |
さて!これでアニメーションが作成できましたね!素敵です!
まとめ
いかがでしたでしょうか。CSSを使うと簡単なアニメーションでしたらすぐに実装することができ、少し難しいことも視点を変えるとCSSアニメーションで作ることができます。
JavaScriptと組み合わせることでさらに表現の幅が広がるので、CSSアニメーションができるようになったら次はJavaScriptで制御してみましょう。
CSSアニメーションの勉強には、animate.cssの中身をみるととても参考になります。
https://github.com/daneden/animate.css
それではみなさまの良きCSSライフを!
参考記事
- https://developer.mozilla.org/ja/docs/Web/CSS/@keyframes
- https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations
- https://developer.mozilla.org/ja/docs/Web/CSS/animation
ホームページ制作はもちろん、ブログ・SNSの運用やコンテンツ企画もお任せください。