transition 사용하기
transition?
- 스타일 변경 시 부드럽게 전환하도록 합니다.
- 선택자가 변화되는 것을 시간의 흐름을 줘서 변화시키는 속성
사용 방법
.a {
transition: <property> <duration> <function>
}<property>와 <function>는 생략 가능합니다.
function 기본 값은 ease입니다.
예시1
.a {
transition: opacity 0.2s linear;
}opacity가 0.2s에 걸쳐 변환됩니다.
function들
| property | 효과 | 그래프 |
|---|---|---|
| ease | 기본값. 느리게 시작한 다음 빠르게 전환한 다음 천천히 종료 |  |
| linear | 처음부터 끝까지 같은 속도로 전환 |  |
| ease-in | 느리게 시작한 후 일정한 속도에 다다르면 그 상태로 등속 운동. |  |
| ease-out | 일정한 속도의 등속으로 시작해서 점점 느려지며 종료 |  |
| ease-in-out | ease와 비슷하게 느리게 시작하여 다시 느려지면서 종료 |  |
| cubic-bezier(n,n,n,n) | 3차 베지어 함수에서 자신의 값을 임의적으로 정함. https://cubic-bezier.com | - |
