# アニメーション研修

# 変化させられる値
## 色
colorやbackground-colorの色は、R、G、B、Alphaに分解され計算されます。

## 長さ
widthやleftなどのpxやemなどの指定は実数として計算されます。

## 角度
transformのrotate()などでのdegやturnはおそらく実数として計算されます（仕様書に明示されていないため）。

## パーセンテージ
widthやpaddingなどの%の指定は実数として計算されます。

## 整数
z-indexやline-heightなどの整数は実数として計算されます。

## フォントウェイト
font-weightの値は100区切りの実数として、600、700、800などのように計算されます（normalは400、boldは700）。

## 矩形
clipのx、y、width、heightがそれぞれ実数として計算されます。

## visibility
visibilityのvisibleとそれ以外（hiddenかcollapse）が0から1に振り分けられ、遷移する途中は開始点と終了点で近い数値に効果が割り当てられます。

## 影
box-shadowやtext-shadowにおける影のそれぞれの成分が分解され、計算されます。ただし、insetから非insetまたはその逆の場合、インターポレイテッドではなくなります。

## グラデーション
color-stopの色とcolor-stopの地点が計算されます。linearからradialの遷移はできません。またcolor-stopの数も同じである必要があります。ただし皮肉なことに、background-imageプロパティが非animatableのため、アニメーションに利用できる機会はほとんどありません。

このようにCSSプロパティにはアニメーション適用可能、不可能があるのです。そして意外かもしれませんが、実はvisibilityプロパティもanimatableなプロパティなのです。

# アニメーション可能な CSS プロパティ
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_animated_properties