[CSS] Transition & Animation & Transform

遷移プロパティ

遷移は、アトリビュートをゆっくり変化させるアトリビュートです.

div {
  transition: property duration [timing-function] [delay];
}

① property

遷移を適用するプロパティの指定
transition-property: none | all | property | initial | inherit

none:すべての属性に適用されません

all:すべての属性に適用

property:属性を決定します.複数の属性を指定する場合

をカンマで区切ります.

initial:デフォルトに設定

親要素の属性値を継承します.

② duration

遷移の合計時間(期間)の指定
transition-duration: time | initial | inherit
ex) transition: font-size 2.5s;//font-size変更時
ex) transition: all 2.5s;//全部取り替えた時.

デフォルトは0 s

ms | s -> 1000ms == 1s

initial:デフォルトに設定

inherit:親要素の属性値を継承します.

③ timing-function

遷移の変化速度の指定(進捗)
transition-timing-function: ease-in | ease-out | ease-in-out | cubic-bezier() | initial | inherit

ease-in:先遅後速

ease-out:先速後遅

ease-in-out:ease-in,ease-outハイブリッド

cubic-bezier(n,n,n,n):nに0から1を加算します.
https://cubic-bezier.com/参照!

initial:デフォルトに設定

inherit:親要素の属性値を継承します.

④ delay

移行の設定は数秒後に実行してください
transition-delay: time | initial | inherit

デフォルトは0 s

ms | s -> 1000ms == 1s

initial:デフォルトに設定

inherit:親要素の属性値を継承します.

👩‍💻 注)遷移:font-size 1000 ms ease-out,background-color 2000 ms cubic-bezier(0.8,0.5,0.9,-0.6)1000 ms;これにより、各属性を個別に与えることができます.

アニメーションのプロパティ

CSSのアニメーションアトリビュートを使用してダイナミックエフェクトを作成できます.(自由度が遷移より大きい)

div {
  animation: property duration [timing-function] [delay]
}

①animation-name:アニメーション名;

どの@キーフレームを使用するかを決定

② @keyframes

どんな形からどうなるかを決める.

@keyframes 애니메이션이름 {
  from {
  /* rules */
  }
  to {
  /* rules */
  }
  
  0% {}
  50% {}
  100% {}
}

アニメーション名:アニメーションの名前を指定

0%:起動時の外観は、0%

の代わりにfromを使用できます.

100%:終了時の外観、100%利用可能

③ animation-duration

アニメーションの合計時間.
animation-duration: time | initial | inherit

time:時間を指定し、ms|s

を使用

initial:デフォルトに設定

inherit:親要素の属性値を継承します.

④ animation-timing-function

アニメーションの進行状況の指定
animation-timing-function : ease-in | ease-out | ease-in-out

⑤ animation-delay

アニメーション開始前の待ち時間(数秒後に開始)
animation-delay: time | initial | inherit

time:時間を指定し、デフォルト値は0で、ms|s

を使用します.

initial:デフォルトに設定

inherit:親要素の属性値を継承します.

⑥ animation-iteration-count

アニメーションの繰り返し回数の指定
アニメーション-反復-count:整数を入力|無限(無限反復)

⑦ animation-direction

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit

normal:デフォルト、指定された順序で

reverse:逆の順序で

alternate:指定された順序で行い、その後逆の順序で

alternate-reverse:逆の順序で行い、指定した順序で

initial:デフォルトに設定

inherit:親要素の属性値を継承します.

ex) animation-direction: alternate;
ローテーション

属性の変換

transformプロパティを使用して、要素を回転したり、スケールしたりすることができます.

① transform: translate(x, y);

要素をx軸とy軸に位置決めする場合

translateX:x軸方向

translationY:y軸方向移動
👩‍💻 %単位ではなくpxにパーセントを入れることができます->変換自体のサイズに基づいて誰をベースにするか

.box{
  width: 300px;
  height: 300px;
  transform: translate(10%, 10%);
/* width의 10%, height의 10% */
}

② transform: scale(N);

サイズをN倍に拡大または縮小するために使用
👩‍💻 注意:transform:scale(x,y);自己幅のx倍、heightのy倍

③変換：回転（角度）；

要素を角度で回転します.

transform: rotate(angle)

transform:RotateX(角度):x軸回りに回転

transform:回転(角度):y軸回りに回転