# Transition

* `transition`
* `transition-property` : 트랜지션을 적용해야 하는 CSS 속성의 이름 혹은 이름들을 명시합니다. 여기에 나열한 속성만 트랜지션하는 동안 움직입니다.
* `transition-duration` : 트랜지션이 일어나는 지속 시간을 명시합니다. 트랜지션 동안 모든 속성에 적용하는 단일 지속 시간을 명시하거나, 다른 주기로 각 속성이 트랜지션하게 하는 여러 지속 시간을 명시할 수 있습니다.
* `transition-timing-function` : 속성의 중간값을 계산하는 방법을 정의하는 함수를 명시합니다. Timing functions는 트랜지션의 중간값을 계산하는 방법을 결정합니다.
  - ease | linear | step-end | steps(4, end)
* `transition-delay` : 속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의합니다.


```CSS
div {
  transition: <property> <duration> <timing-function> <delay>;
}
```

## 트랜지션 완료 이벤트
```javascript
element.addEventListener('transitionend', function(propertyName, elapsedTime){}, true);
```