[TIL] CSS Break down (Transition, Transform)

1. Transition???

CSS属性値が変化した場合、指定した時間内に変更可能(スリップ)
優先トランザクションはショートカット属性であり、複数の個別属性を有する.意味さえわかれば、使うのは難しくありません.順番に調べましょう.

1.1 property

発生させるプロパティを指定できます.通常使用all

transition-property: width, height;

マウスが通るときに異なる背景色を指定した場合、上の場合は背景色は変わりません.

1.2 duration

その名の通り、持続時間です.何秒かで変えるかどうかを決める.

1.3 timing-function

進捗を指定できます.たとえば、まず急速に変化し、その後ゆっくりと変化することができます.提供価格もありますが、カスタマイズ可能cubic-bezier(n, n, n, n)

transition-timing-function: ease; /*기본값임*/
천천히 시작되어 그 다음에는 빨라지고 마지막에는 다시 느려집니다. 

1.4 delay

設定は数秒後に変わります.デフォルト値はもちろん0ですが、1sを指定すると、特殊な場合(マウスが多すぎると仮定)の要素にマウスを置き、1秒後に変化を観察することができます.

2. Transform

複数のシェイプに変形するときに使用されるアトリビュートは、トランジションとともに使用され、アニメーションに似たペアです.次の属性があります.

.box {
  width: 100px;
  height: 100px;
  background: blue;
  transition: all 1s;  
.box:hover {
  transform: scale(2);
  transform: rotate(180deg);
  transform: translate(100px, 100px);
  transform: skew(40deg);  

2.1 scale

拡張された機能.もちろん縮小も可能です.scale(2)縦横2倍、scale(0.5)縦横半分.

2.2 rotate

回転機能、単位はdegrotate(180deg)180度回転

2.3 translate

移動の機能(x軸、y軸)が移動します.(Y軸は数学の図形とは反対)translate(100px, 100px);x軸100 px移動は、y軸100 px移動を意味する.

2.4 skew

ねじれのプロパティ.transform: skew(40deg);40度ねじれです.

2.5 origin

以上のすべての変更の標準プロパティ.transform-origin: 0 0;x軸、y軸0を示す点(デフォルトはcenter)
移動するときは明らかな違いはありませんが、回転してみればわかります.

😎New!!!

・transform-origin仮想クラスに貼るのではなく、該当する要素に記入する必要があります!!

transition vs animation

transition特別な場合だけアニメに見える!!