[📚 Index ]

1. transition이란 무엇인가?

2. 종합 사용 방법

3. transition이 가능한 tag들

4. transition-property

5. transition-duration

6. transition-delay

7. transition-timing-function

1. transition이란 무엇인가?

CSS 속성을 변경할 때 애니메이션 속도를 조절할 수 있습니다. CSS 에서 특정 속성을 변경할 때가 있을 겁니다. 예를 들어서 font-size 를 10px에서 14px로 바꾸든지 말이지요. 이 때 CSS 속성 변경이 즉시 실행되게 하는 대신에, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. font-size 기 10px에서 14px로 천천히 바뀌도록, 혹은 부드럽게 바뀌도록 해줄 수 있는 것이지요.

변경 시키기 전의 상태를 initial state, 후의 상태를 final state 라고 하겠습니다. CSS 의 속성을 변화시킬 때 사진에서 처럼 initial state 에서 final state 즉각적으로! 빠릿빠릿하게 움직입니다.

이렇게 말이지요!!! 두 상태 (initial, final) 사이의  애니메이션을 암묵적 트랜지션(implicit transitions)이라고 부르는데, 이는 시작과 종료 상태 사이의 상태를 브라우저가 암묵적으로 정의하기 때문입니다.