CSSアニメーションについて、前回の文法をもう少し細かく基本文法を解説します。
着目していただいたいのは、「書き方」,「設定プロパティの種類」の2点です。
各プロパティの詳細は個別に別の記事で紹介しますので、ここでは書き方の注意点を理解できれば十分です。
書き方
See the Pen Untitled by naoq (@naoq) on CodePen.
animation-nameｍと@keyframesを紐づけ
animation-nameで指定した名前 と @keyframesアットルールで定義されたルール名を同名にして紐づけます。（今回は「rotate」と名付けています）
名前の付け方は、どの部分のどの動きをを連想できる英単語が後で読みやすくなります。
変化したいプロパティと度合いを指定
@keyframes内で指定していきます。
今回は
動き始めの「0％」に回転0度
動き終わりの「100%」に320度を指定しています。
0%, 68%, 72%, 100% のようにキーフレーム（中間地点）で段階を細かく指定することもできます。
動きの種類は別の記事で紹介します。
動きだけでなく、色やwidth,heightなども段階的に変化させられます。
時間、回数、変化スピードなどの動きの条件
animationプロパティは 「変化させたい CSS プロパティ」の値の間でスムーズな変化を作り出す方法を定義します。
animation-name
アニメーションのキーフレームを示す @keyframes アットルールの名前を指定します。
animation-duration
1 回のアニメーションサイクルに要する時間の長さ
animation-timing-function
加速曲線を定義することで、キーフレーム間のアニメーションをどのように進めていくかを表します。
animation-delay
アニメーションを始めるまでの遅延時間を設定します。
animation-iteration-count
アニメーションを繰り返す回数を設定します。
animation-direction
アニメーション完了時に、逆方向にアニメーションして繰り返すか、始めの状態にしてアニメーションを繰り返すかを設定します。
animation-fill-mode
アニメーションの実行前後に、指定したスタイルを適用するかを設定します。
animation-play-state
アニメーションを一時停止したり、再開したりすることができます。
サンプルコードのコメントアウト部分のように1行でまとめて表記することもできます。
animation:rotate 3s ease-in 2s infinite alternate;
animation:[name] [duration] [timing-function] [delay] [iteration-count] [direction];変化させられるプロパティ
色、サイズ、位置など様々なプロパティを変化させられます。
以下のページでどんなプロパティが適用できるか確認できます。
時間、回数、スピードなどの動きの条件
animationプロパティの個別に記入例を表記します。
1回のアニメーションに要する時間の長さ
animation-duration: 5s;
animation-duration: 50ms;
アニメーションの進め方（スピードの変化）
/* キーワード値 */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;
/* 関数値 */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);遅延時間を設定
animation-delay: 5s; animation-delay: 50ms;繰り返す回数を設定
/* キーワード値 */
animation-iteration-count: infinite;
/* <number> 値 */
animation-iteration-count: 3;
animation-iteration-count: 2.4;逆方向/一定方向でアニメーションを繰り返し
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;実行前後に、スタイルを適用
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;一時停止/再開
animation-play-state: running;
animation-play-state: paused;サンプル transform（回転、拡大縮小、傾斜、移動）
transform プロパティは、与えられた要素を回転、拡大縮小、傾斜、移動することできます。
回転
rotate 平面上で特定の点を中心に回転
See the Pen ｃｓｓ transform－rotate by naoq (@naoq) on CodePen.
rotateX 水平軸を中心に回転
See the Pen CSS transform－rotateX by naoq (@naoq) on CodePen.
rotateY 垂直軸を中心に回転
See the Pen CSS transform－rotateY by naoq (@naoq) on CodePen.
rotateZ Z 軸(奥行)を中心に回転
See the Pen CSS transform－rotateZ by naoq (@naoq) on CodePen.
rotate3d 三次元空間で特定の軸を中心に回転
See the Pen rotate3d by naoq (@naoq) on CodePen.
拡大縮小
scaleX 水平に拡大・縮小
See the Pen CSS transform－scaleX by naoq (@naoq) on CodePen.
scaleY 垂直に拡大・縮小
See the Pen CodePen Home CSS transform－scaleY by naoq (@naoq) on CodePen.
scaleZ Z 軸方向(奥行)に拡大・縮小
See the Pen CSS transform－scaleZ by naoq (@naoq) on CodePen.
scale 平面上で拡大・縮小
See the Pen CSS transform－scale by naoq (@naoq) on CodePen.
scale3d x,y,ｚ方向に拡大・縮小
See the Pen CSS transform－scale3d by naoq (@naoq) on CodePen.
歪め
skewX 水平に歪まる
See the Pen CSS transform－skewX by naoq (@naoq) on CodePen.
skewY 垂直に歪まる
See the Pen CSS transform－skewY by naoq (@naoq) on CodePen.
skew 平面上で歪ませる
See the Pen CSS transform－skew by naoq (@naoq) on CodePen.
平行移動
translateX 水平に平行移動
See the Pen CSS transform－translateY by naoq (@naoq) on CodePen.
translateY 垂直に平行移動
See the Pen Untitled by naoq (@naoq) on CodePen.
translateZ Z 軸方向(奥行)に平行移動
See the Pen CSS transform－translateZ by naoq (@naoq) on CodePen.
translate 平面上で平行移動
See the Pen CSS transform－translateZ by naoq (@naoq) on CodePen.
translate3d 三次元空間で平行移動
See the Pen CSS transform－translate3d by naoq (@naoq) on CodePen.
視点距離
perspective ユーザーと z=0 平面との間の距離を設定します。
閲覧者から距離で三次元的に視野角が変化するイメージ
See the Pen CSS transform－perspective by naoq (@naoq) on CodePen.
行列変換
matrix 二次元の同次変換行列を記述
See the Pen ｃｓｓ transform－matrix by naoq (@naoq) on CodePen.
1番目の数値は、水平方向の縮尺
2番目の数値は、垂直方向の傾斜率
3番目の数値は、水平方向の傾斜率
4番目の数値は、垂直方向の縮尺
5番目の数値は、水平方向の移動距離
6番目の数値は、垂直方向の移動距離
matrix3d 三次元の変換を4×4の同次行列で記述。視点距離
別の記事で解説します。
まとめ
今回は主に設定項目とその設定値についてご紹介しましたが、複数のアニメーションなどを別の記事で紹介していきたいと思います。
