transition, translate, transform

계속 헷갈려서 정리해두고 보면서 공부해야겠다

1. transition

: 엘리먼트의 CSS 속성을 변경할 때 두 가지 상태 사이에 일어나는 변화(애니메이션)를 커스터마이징 할 때 사용한다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 하는 것이다.
시간의 흐름을 가지고 A CSS에서 B CSS로 변환되는 것

element 변형 시 속도, 시간, 횟수 들을 조절한다.

문법

transition:
property(속성) duration(걸리는 시간) timing-function(속도 패턴) delay(실제 실행까지 기다려야 하는 시간)

2. transform

: 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있음.
: 회전을 위한 rotate() 함수, 크기 조절을 위한 scale() 함수, 기울이기를 위한 skew() 함수, 이동을 위한 translate() 함수가 있음.

3. translate

: X축으로 x만큼, Y축으로 y만큼 이동시킴
: 요소의 위치를 수평 또는 수직 방향으로 변경하거나, 수평 및 수직 방향으로 변경함.