動くCSSのためのメモ。

transitionプロパティ

transition-property（トランジション・プロパティ）プロパティ

効果を適用したいプロパティ名を指定します。

• none
• all（初期値）
• CSSプロパティ名

transitionを適用できるプロパティは、プロパティの値を数値で表現できるものすべて。colorの値に使われるredやlightSeaGreenなどの色名も、RGBなどの数値で表すことができるのでちゃんと適用されます。

transition-duration（トランジション・デュレーション）プロパティ

変化の開始から完了までにかかる時間を、秒数で指定します。

• 0s（初期値）
• 秒数

1秒（1000ミリ秒） = 1s（1000ms）。

transition-timing-function（トランジション・タイミング・ファンクション）プロパティ

変化の仕方（イージング）を指定します。

• ease（初期値）
• linear
• ease-in
• ease-out
• ease-in-out
• step-start
• step-end
• steps()
• cubic-bezier()

cubic-bezier関数を使えばオリジナルなイージングを作ることもできます。詳しくはマウスオーバーエフェクトのページで後述。

transition-delay（トランジション・ディレイ）プロパティ

変化を開始するまでの待ち時間を、秒数で指定します。

• 0s（初期値）
• 秒数

マイナスの値を指定すると、その分進んだ時点から変化を開始します。

animationプロパティ

animation-name（アニメーション・ネーム）プロパティ

適用したいアニメーション名を指定します。

• none（初期値）
• アニメーション名

アニメーション名とは@keyframes規則で定義したアニメーションの名前のこと（後述）。

animation-duration（アニメーション・デュレーション）プロパティ

アニメーションの一回分の長さを、秒数で指定します。

• 0s（初期値）
• 秒数

transition-durationと同様。

animation-timing-function（アニメーション・タイミング・ファンクション）プロパティ

アニメーションの仕方（イージング）を指定します。

• ease（初期値）
• linear
• ease-in
• ease-out
• ease-in-out
• step-start
• step-end
• steps()
• cubic-bezier()

transition-timing-functionと同様。

animation-delay（アニメーション・ディレイ）プロパティ

アニメーションを開始するまでの待ち時間を、秒数で指定します。

• 0s（初期値）
• 秒数

transition-delayと同様。

animation-iteration-count（アニメーション・イテレーション・カウント）プロパティ

アニメーションを繰り返す回数を指定します。

• 1（初期値）
• 回数
• infinite

infiniteは無限にアニメーションが繰り返されます。回数を小数点以下に指定した場合は途中までアニメーションします。

animation-direction（アニメーション・ディレクション）プロパティ

アニメーションする方向を指定します。alternateは、偶数回めのアニメーションを逆再生にする指定。

• normal（初期値）
• reverse
• alternate
• alternate-reverse

animation-play-state（アニメーション・プレイ・ステート）プロパティ

アニメーションを再生させたり一時停止させたりできます。

• running（初期値）
• paused

animation-fill-mode（アニメーション・フィル・モード）プロパティ

アニメーションの前後に、スタイルをどう適用するかを指定します。※詳しくはマウスオーバーエフェクトのページで後述。

• none（初期値）
• forwards
• backwards
• both

@keyframes規則（キーフレームス・アットルール）

以下のような書き方でキーフレームを定義します。
キーフレームとは、経過時間に対して、0%（from）時点〜100%（to）時点、その時々の要素の状態を設定したもの。動きの過程を書き記した台本みたいな感じ。

@keyframes アニメーション名 {
	from { アニメーション開始時の要素の状態 }
	50% { 50%経過した時点の要素の状態 }
	to { アニメーション終了時の要素の状態 }
}