transition-property
transition: width;
- 전환 효과를 사용할 속성 이름을 지정
- all(기본값) : 모든 속성에 적용
transition-duration
transition: width 0.5s;
- 전환 효과의 지속시간을 지정
- 필수로 설정해야하는 값이다
transition:
width 0.5s,
background-color 2s;
- 동시에 두개의 속성에 지속시간을 설정할 수 있다.
transition-timing-function
- 전환 효과의 타이밍(Easing) 함수를 지정
- ease : 느리게 → 빠르게 → 느리게
- linear : 일정하게
- ease-in : 느리게 → 빠르게
- ease-out : 빠르게 → 느리게
- ease-in-out : 느리게 → 빠르게 → 느리게