transition-timing-function 속성

transition-timing-function 속성은 transition 전환 효과의 변화 속도 (가속도)를 설정합니다. 예를 들어, 처음에는 느리게, 그다음 빠르게, 다시 느리게 변화하는 등의 효과를 줄 수 있습니다.

문법

선택자 {
	transition-timing-function: 값;
}

값

값	설명
`ease`	처음과 끝이 느리고 중간이 빠릅니다.
`ease-in`	느리게 시작하여 점점 가속됩니다.
`ease-out`	빠르게 시작하여 점점 감속됩니다.
`ease-in-out`	느리게 시작하여 가속된 후 다시 느려집니다. ease와 비교하여 속도 변화가 다릅니다.
`linear`	처음부터 끝까지 일정한 속도를 유지합니다.
`step-start`	애니메이션이 없으며, 속성이 즉시 최종 값으로 변경됩니다.
`step-end`	애니메이션이 없으며, 속성은 `transition-duraton`에 설정된 시간 동안 기다린 후 즉시 최종 값으로 변경됩니다.
`steps`	속성 값이 단계적으로 변화합니다.
`cubic-bezier`	임의의 애니메이션을 정의할 수 있는 베지어 곡선. 참조: 베지어 곡선 생성기.

기본값: ease.

다양한 값 비교

아래 상자들 위에 마우스를 올려보세요. 모든 종류의 타이밍 함수 작동을 확인할 수 있습니다:

예제

블록 위에 마우스를 올리면 2초 동안 너비가 부드럽게 변경됩니다. 값이 ease-in로 설정되어 있으므로, 애니메이션이 느리게 시작하여 점점 가속될 것입니다:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	transition-timing-function: ease-in;
	transition-duration: 2s;
	transition-property: width;
	height: 50px;
	width: 100px;
}
#elem:hover {
	width: 400px;
}

함께 보기

전환 효과의 지속 시간을 설정하는 속성 transition-duration
전환 효과를 적용할 속성의 이름을 설정하는 속성 transition-property
전환 효과 시작 전 지연 시간을 설정하는 속성 transition-delay
전환 효과에 대한 단축 속성 transition
애니메이션을 만들 수 있는 속성 animation