css transition 과 transform 2d!

1. transition

transition css속성의 시작과 끝을 지정하여 사이의 애니메이션 효과를 주는 단축 속성이다!

시작하는 속성이 있는 요소에 transition 을 사용하여 사용한다.

/* ex */

.box {
  width: 100px;
  height: 100px;
  background: tomato;
  /*단축속성으로 한번에 지정도 가능
  transition: all 0.5s ease 1s; 불필요한 것은 생략가능
  */
  transition-property: width,background;
  transition-duration: 0.5s;
  transition-delay: 1s;
  }
  
.box:hover {
  width: 300px;
  background: blue;
  }

• transition-property 효과를 사용할 속성 이름을 설정. 따로 설정하지 않으면 모든 속성이 선택된다.
• transition-duration 효과의 지속시간을 설정한다.
• transition-timing-function 타이밍 함수(애니메이션효과가 빠르게 가다가 천천히 or 천천히 가다가 빠르게 이런 방식)를 지정
  값은 ease, linear, ease-in, ease-out, ease-in-out, steps(n) 등이 있다. 
• transition-delay 효과의 대기시간을 설정한다.

2. transform

transform 요소를 변형(변환) 시키는 속성!

값은 2d 변환 함수

• translate(x, y)  x축으로 x만큼 y축으로 y만큼 이동
• translateX(x) x축으로 x만큼 이동
• translateY(y) y축으로 y만큼 이동
• scale(x, y) x축으로 x배 y축으로 y배 확대
• scaleX(x) x축으로 x만큼 확대
• scaleY(y) y축으로 y만큼 확대
• rotate(deg) ndeg 만큼 회전
• skew(x-deg, y-deg) x축을 기준으로 xdeg만큼 y축을 기준으로 ydeg만큼 기울임 
• skewX(x-deg) x축을 기준으로 xdeg만큼 기울임
• skewY(y-deg) y축을 기준으로 ydeg만큼 기울임

ex) transform: translate(10px, 10px) scale(1.5, 1.5) rotate(30deg) skew(45deg, 45deg);

      한 번에 작성도 가능하고 불필요한 것은 작성하지 않아도 된다.