[frame]

[frame]：キーフレームアニメーションのフレームごとの設定

カテゴリ：アニメーション操作

パラメータ

• p（必須）：アニメーション全体の中の進行度を数値で指定します。（単位：パーセント）全体が5秒のアニメーションの1秒経過時であれば、"20"を指定します。
  初期値：""
• x：横方向へのアニメーション量を数値で指定します。（単位：ピクセル）指定するのは「この位置へ移動する」ではなく、「これだけの長さ分移動する」ですので注意しましょう。数値の前に"*"（半角アスタリスク）を付けて指定することで、絶対位置（＝この位置へ移動する）とすることが可能です。
  初期値：""
• y：縦方向へのアニメーション量を数値で指定します。（単位：ピクセル）指定するのは「この位置へ移動する」ではなく、「これだけの高さ分移動する」ですので注意しましょう。数値の前に"*"（半角アスタリスク）を付けて指定することで、絶対位置（＝この位置へ移動する）とすることが可能です。
  初期値：""
• z：前後方向へのアニメーション量を数値で指定します。（単位：ピクセル）指定するのは「この位置へ移動する」ではなく、「これだけの高さ分移動する」ですので注意しましょう。数値の前に"*"（半角アスタリスク）を付けて指定することで、絶対位置（＝この位置へ移動する）とすることが可能です。
  初期値：""
• rotate：回転量を「数値deg」で指定します（単位：角度）"360deg"と指定すると、360度回転します。
  初期値：""
• rotateX：縦軸の回転量を「数値deg」で指定します（単位：角度）"360deg"と指定すると、360度回転します。
  初期値：""
• rotateY：横軸の回転量を「数値deg」で指定します（単位：角度）"360deg"と指定すると、360度回転します。
  初期値：""
• rotateZ：前後軸の回転量を「数値deg」で指定します（単位：角度）"360deg"と指定すると、360度回転します。
  初期値：""
• scale：拡大率を数値で指定します。（単位：倍率）"2"と指定すると、2倍の大きさになります。
  初期値：""
• scaleX：横方向の拡大率を数値で指定します。（単位：倍率）"2"と指定すると、2倍の大きさになります。
  初期値：""
• scaleY：縦方向拡大率を数値で指定します。（単位：倍率）"2"と指定すると、2倍の大きさになります。
  初期値：""
• scaleZ：前後方向の拡大率を数値で指定します。（単位：倍率）"2"と指定すると、2倍の大きさになります。
  初期値：""
• skew：傾斜角度を数値で指定します。（単位：角度）
  初期値：""
• skewX：横方向の傾斜角度を数値で指定します。（単位：角度）
  初期値：""
• skewY：縦方向の傾斜角度を数値で指定します。（単位：角度）
  初期値：""
• perspective：遠近効果の度合いを数値で指定します。
  初期値：""
• opacity：透明度を0～1の数値で指定します。0で透明、1で不透明です。
  初期値：""
• その他：CSSの各種プロパティを指定することができます。

使い方

[keyframe name="anime"]
[frame p=0 x=10]
[frame p=100 x=2000]
[endkeyframe]