트랜지션이란 한 장면에서 다른 장면으로 바꿀 때, 또는 다른 기능의 실행 시 사용하는 장면 전환 기술을 의미한다. 웹사이트를 이용하다 보면 화면이 깜빡거리며 전환되거나 새로운 화면이 효과를 통해 들어오는 것을 종종 볼 수 있을텐데 이러한 효과를 모두 '트랜지션'이라고 부른다.

1. duration

: 트랜지션이 실행되는 시간이다. (지연 시간)
아래와 같이 배경 색을 바꿔주는 트랜지션을 넣었다고 한다면...
그 배경색이 바뀌는 시간에 해당한다.
200ms 동안 천천히 바뀌어 가겠지??

.container {
  transition-property: background-color;
  transition-duration: 200ms;
}

2. delay

: 트랜지션이 실행되기 전 딜레이를 걸어준다.
아래처럼 3s의 딜레이를 걸어둔다면 페이지가 실행되고 3초 동안은 적용해둔 트랜지션이 작동하지 않는다.
3초부터 실행될 것이다.

.game {
  position: relative;
  display: inline-block;
  height: 60%;
  transition-delay: 3s;
}

3. transition-timing-funtion

: 트랜지션 전환을 천천히 시작해서 중간에 속도를 높이고 끝에 다시 낮춘다.

transition-timing-function: ease-out;

• ease-in — 느리게 시작, 빠르게 가속, 갑자기 멈춤
• ease-out — 갑작스럽게 시작하고 느리다가 천천히 끝납니다.
• ease-in-out — 느리게 시작하고 중간에서 빠르게되고 천천히 끝납니다.
• linear — 전체적으로 일정한 속도

4. Shorthand

: 위의 속성들은 한번에 선언할 수 있다.
property, duration, timing-function, delay 순서로 선언할 수 있다.

transition-property: color;
transition-duration: 1.5s;
transition-timing-function: linear;
transition-delay: 0.5s;

: 위와 같은 코드를 아래 한줄로 표현한다.

transition: color 1.5s linear 0.5s;

5. 한번에 여러 속성을 적용하는 방법

: 쉼표 찍고 한줄 더 적는다.

transition: color 1s linear,
font-size 750ms ease-in 100ms;