[CSS] transition과 transform

transition

transition이란?

CSS에서 속성을 이용한 변화의 전, 후 사이에 애니메이션을 추가해서 움직임을 부드럽게 해주는 것

1. transition-property
   어떠한 속성에 transition을 적용할 것인지 지정 transition-property: color, transform
   
   
2. transition-duration
   transition에 걸리는 시간을 지정
   
   
3. transition-timing-function
   transition의 속도 패턴을 지정한다

[종류]
linear : 일정한 속도로 변화한다.
ease: 시작할 때는 빨라지다 느려진다.
ease-in: 천천히 시작했다가, 속도를 높여 끝난다.
ease-out: 빠른 속도로 시작했다가, 천천히 끝난다.
ease-in-out: 천천히 시작했다가, 정상 속도가 됐다가, 빠르게 끝난다.

4. transition-delay
   transition요청을 받은 후, 실제로 실행되기까지 기다려야하는 시간의 양을 지정
   transition-delay: 2s
   
   
5. transition 단축속성
   transition: color    0.4s    ease-in-out   1s
                      속성     시간         속도패턴    딜레이시간

transform

transform이란?

대상이 되는 요소에 대한 이동, 회전, 확대축소, 비틀기 등의 변형 효과를 주는 것

[속성값]
translate(x, y)
scale(x, y)
skew(x-angle, y-angle)
rotate(angle)

1. translate(x, y)
   요소의 좌표를 움직일 수 있다.
   x축으로 x만큼, y축으로 y만큼 이동
   translateX(n) : 요소의 x축 좌표를 n만큼 움직일 수 있다.
   transform: translateX(20px)
   y축도 마찬가지로 사용 가능
   
   
2. scale(x, y)
   x축으로 x만큼, y축으로 y만큼 요소를 축소 혹은 확대한다.
   transform: scale(0.75, 1.1) > x축의 0.75축소, y축의 1.1확대
   scaleX(n), scaleY(n) 사용가능
   
   
3. skew(x, y)
   x축으로 x도 만큼, y축으로 y도 만큼 요소를 기울인다.
   transform: skew(15deg, 10deg)
   skewX(n), skewY(n) 사용가능
   
   
4. rotate(n)
   요소를 n만큼 회전시킨다. (시계방향으로)

transform은 변환함수를 중첩적용 시키는 것이 가능한 속성이다!
transform: skew(30deg, 10deg) rotate(45deg)