やっはろー
HTMLやCSSの勉強を始めて、お洒落に文字を動かしたい！アニメーションをさせたい！
とか思ったりしてない？
最近のサイトでもアニメーションを多く使ったお洒落なサイトがたくさんあって、色々な印象を与えてくれる、とても便利な機能だと思うんだ！そこで今回は、CSSを使ったアニメーションの書き方を、簡単にまとめていくよー
うひょー！！お願いしまーす！
Contents
CSSアニメーションとは？
CSSアニメーションは、CSSを使用してHTML要素をアニメーションすることが出来る機能です。
僕がポートフォリをとして制作したサイトもCSSアニメーションを多く使用しています。
下記サイトより確認してみてください。
（※動きの制御はJavaScriptを使用しておりますが、今回はCSSアニメーションのみの解説します）
animationとtransitionについて
CSSアニメーションには大きく分けて、CSS animationとCSS transitionの2種類あります。
animationは、少し凝ったアニメーションというイメージで、transitionは、お手軽なアニメーションというイメージになります。
2つの違いを下記リストで簡単に説明しますので確認してみましょう。
transition
- 往復のアニメーション ・・・ループではなく、戻るアニメーションが自動でつく
- きっかけとなるトリガーが必要 ・・・要素を変化させる :hover・:activeなどのトリガーが必要
- 詳細な設定ができない ・・・変化前と変化後のつなぎ方を設定する事で細かく設定ができない
animation
- 片道のアニメーション・・・ループ回数の指定が可能。往復のアニメーションも作る事もできるが有用ではない
- ウィンドウを読み込んで即実行が可能・・・読み込み後すぐに実行されます。実行のタイミングはJavaScriptにて操作する
- 詳細な設定が可能・・・変化量や様々な細かい設定が可能
それぞれ特徴があるので、動かしたいアニメーションに合わせて使用しましょう。
今回は、CSS animationを解説していくよ。transitionは今後ブログに上げるので少々おまちおー
CSS animationの基本的な書き方
CSS animationを使用する為には、下記２つの設定をする必要があります。
- @keyframes ・・・アニメーションさせる要素の形状、状態を記載する
- animationプロパティ ・・・@keyframesで指定した動きの変化に時間、タイミング等を適用させる
説明だと分かりずらいので各々コードの記述方法をみていきましょう！
@keyframesの記述方法
まずはkeyframesの記載方法を下記コードで確認してみましょう。
200pxの四角が大きくなって小さくなる様に設定してみます。
See the Pen by MUKIRYOKU (@MUKIRYOKU) on CodePen.
上記の様に、keyframesには要素の形状や状態を記述します。
0％（アニメーション開始時）200pxの四角→50%（アニメーション途中）300pxの四角→100%（アニメーション終了時）と変化していきます。
また@keyframesの後に記載した任意の名前には、ExampleAnimationと定義しています。animeaionプロパティでも使用するので、分かりやすい任意の名前をつけましょう。
ここがポイント
keyframes内のパーセントは10%や30％、80％など細かく設定ができるよ！
keyframesだけでは、まだ変化が起こりません。２つ目の設定であるanimeaionプロパティの種類と記載方法をみていきましょう。
animationプロパティの種類
animeaionプロパティには、８つのプロパティがあるので、まず簡単に確認してみましょう。
See the Pen by MUKIRYOKU (@MUKIRYOKU) on CodePen.
※今回はアニメーションの書き方を解説するので各プロパティの詳しい解説は下記、記事を参照してください。
こちらもCHECK
-
-
動きをつける！？CSS Animationで使用するanimationプロパティの種類と使い方
続きを見る
animationプロパティの記述方法
それでは、プロパティを軽く理解したところでコードをみていきましょう。
See the Pen by MUKIRYOKU (@MUKIRYOKU) on CodePen.
animation-nameでアニメーションの名前を定義して、animation-durationを任意の時間に設定すればアニメーションが動く様になります。
今回は、animation-iteration-countをinfiniteに設定してアニメーションを無限に繰り返す設定にしています。コードをコピペして自分で値を変えたりプロパティーを追加して変化を確認するとより理解が深まると思いますので活用ください。
ここがポイント
keyframes、animation-name、animation-durationを設定すればアニメーションするよ！逆にこの３つがないと動かないので注意してね！
まとめ
いかがでしょうか？keyfarmeとanimeaionプロパティを組み合わせる事で、おしゃれなアニメーションを自作することができるので、少しずつ理解して良いサイトを制作できる様にがんばりましょう。ただアニメーションを使用しすぎて、分かりずらいサイトにならない様、気をつけてください！
今回あまり解説できなかった、各animeaionプロパティの詳しい解説を追って書こうと思います。
