CSS Animationとは
CSSを使ってアニメーション効果（動き）を演出するには、主に２つの方法があります。
- transitionを使う方法
- animationを使う方法
どちらも「CSSアニメーション」と総称されることもありますが、使用するプロパティから後者の“animationを使う方法”のみをCSSアニメーション（CSS Animation）と呼ぶこともあります。より複雑なアニメーションを表現出来るのも“animationを使う方法”の方です。
animationプロパティについて
animationプロパティがtransitionプロパティと大きく異なるのは@keyframesで、どのタイミングで・どんなプロパティ変化を起こすかを別途定義する必要があるという点です。
この仕組からanimationプロパティを使用するCSSアニメーションは「キーフレームアニメーション」とも呼ばれています。
@keyframesにつけた名前（アニメーション名/上図の場合はspin）を指定することで、どのアニメーションを実行するかを決定しています。 JavascriptやWordPress講座を受講されている方であれば、関数のイメージが近いかもしれません。
それに加えて「どのくらいの時間をかけてアニメーションを実行するか」などを指定することで、その内容に沿ってCSSアニメーションが実行されるという仕組みです。
@keyframesとは
@keyframesは、アニメーションの開始から（0%）終了まで（100%）のプロパティの変化を指定する@規則です。
基本的な書き方は下記のとおりです。
@keyframes 任意のアニメーション名 {
0% {
プロパティ:値１;
}
100% {
プロパティ:値２;
}
}
0%はfrom、100%はtoと書くことも出来ます。 下図の左右はどちらも同じ意味になります。
また、@keyframesは最後だけを指定しても動きます。 初期状態のプロパティ（指定されていない場合は初期値）を補完してくれます。
最初の例で登場した「spin」は最後だけを設定している形です。 rotateY＝Y方向（縦）を軸に回転するという司令が入っているので、実行すると下記のようなアニメーションが実行されます。
※Chromeの検証ツールを使用しています。
@keyframesでは好きなパーセンテージを指定することで、アニメーション中間地点の変化を設定することが出来ます。 始点から「どのよう」に終点まで向かうかを設定するだけのtransitionとの大きな違いと言えますね。
先程のspinで、タイムラインを細かく作ってみましょう。
【例】
@keyframes spin {
0% {
transform: rotate(0) ;
}
25% {
background-color: blue;
}
50% {
transform: rotateX(270deg);
}
75% {
background-color: red;
}
100% {
transform: rotateY(540deg);
}
}
↓プレビュー
アニメーションさせるプロパティと、タイムライン（%での区切り）の組み合わせによって様々な動きを設定することができそうですね。
animation関連プロパティ
@keyframesで設定したアニメーション名以外にも、animationプロパティでは様々な内容を指定することが出来ます。 これはanimationが、下記８つのanimation関連プロパティを一括指定できるプロパティ（ショートハンド）であるためです。
【animationで指定できるプロパティ】
| プロパティ | 意味 | 初期値 |
|---|---|---|
| animation-name | 実行するアニメーションの名前 | none |
| animation-duration | アニメーションが開始してから終了するまでの所要時間を指定 | 0s |
| animation-timing-function | アニメーション実施時の加速曲線を指定する | ease |
| animation-delay | アニメーションを開始するまでの待ち時間を指定 | 0s |
| animation-iteration-count | アニメーションを実行する回数 | 1 |
| animation-direction | アニメーションを再生する向き（順方向、逆方向、前後反転のいずれか） | normal |
| animation-fill-mode | アニメーション開始と終了時に、どう対象にスタイルを適用するか | none |
| animation-play-state | アニメーションが実行中か停止中かを設定する | running |
※各プロパティの詳細はanimation | MDNのページ、ページ上部にある各プロパティ名のリンク先をご確認下さい。
transition関連プロパティと同じ内容で、animation版といったものもあります。 この８つのうち、アニメーション実行のためにanimationプロパティで指定が最低限必要なのは、animation-nameとanimation-durationの２つです。
実習
簡単なキーフレームアニメーションを作ってみましょう。 index.htmlの「I am Morgan Freeman」という文字が、回りながらズーム表示されるように設定してみます。
完成イメージ
下記CSSサンプルをstyle.cssへコピー＆ペーストし、キーフレームの20％、100％部分を穴埋めしてみて下さい。 アニメーション再生回数は1回のみでOKです。
【CSSサンプル】
@keyframes fronttitle {
0% {
transform: scale(0.2, 0.2) ;
opacity: 0.3;
}
20% {
}
100% {
}
.intro-title {
animation: fronttitle 3s;
}
アニメーションやtransformは実際にやってみないと、わかりにくい部分も多いですよね。 見本の再現以外にも色々指定してみると、各プロパティの特徴が掴みやすいです。
完成イメージで使ったコードは、素材欄にアップロードしています。