CSSアニメーションで使う主要プロパティ【独学プログラミング】

CSSアニメーションで使う主要プロパティ

transformプロパティ

  • transform:translate(10px,20px); x方向に10px、y方向に20px移動させる。
  • transform:rotate(45deg); 45度回転させる
  • transform:scale(1.5) 中心を起点に1.5倍に拡大させる
  • transform-origin:left top; 左上を起点に拡大させる

transitionプロパティ

ある状態からある状態へ滑らかに繋いでいく

  • transition-property: transition; transitionプロパティに対して設定する
  • transition-duration: .4; トランジションにかかる時間を0.4秒に指定する

opacity 透明度を指定する

一括指定プロパティ

以下のように省略可能

  • transition :transform .4s , opacity .4s;
  • transition: all .4s;
  • transition: .4s;

transition-timing-functionプロパティ

アニメーションに変化を加える

  • ease 規定値 ゆっくり動き始めて途中早くなって最後ゆっくり止まる
  • ease-out 早く動き始める
  • ease-in-out ゆっくり動き始める

@keyframes

トランジションでは作れないアニメーションや、より複雑なアニメーションが作れる。

アニメーションを定義する

@keyframes spin{
0%{transform:none;}
100%{transform:rotate(360deg);}
}

0%の時点では回転なし、100%の時点では360度回転する

animationプロパティ

  • animation-name: nameを適応させる。上の場合だとspin。
  • animation-duration: アニメーションの時間を指定
  • animation-iteration-count: アニメーションする回数を指定。infinite→無限に繰り返す
  • animation-direction: 偶数回の再生では、0%から100%までを逆再生することができる。スムーズにアニメーションが繋がる。 alternate;
  • animation-fill-mode: アニメーションしたあと、そのままの場所でそのままの形でいて欲しい場合の設定 forwards;

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です