속성 animation-timing-function

속성 animation-timing-function는 애니메이션의 변경 속도(가속)를 설정합니다. 예를 들어, 처음에는 느리게, 그 다음에는 빠르게, 다시 느리게 하는 식입니다.

구문

값

값	설명
ease	처음에는 느리게, 중간에는 빠르게, 끝에는 다시 느리게.
ease-in	느리게 시작하여 점점 가속됩니다.
ease-out	빠르게 시작하여 점점 감속됩니다.
ease-in-out	처음에는 느리게, 중간에는 빠르게, 끝에는 다시 느리게. ease와는 속도가 다릅니다.
linear	항상 일정한 속도.
step-start	애니메이션이 없고, 속성이 즉시 최종 값을 취합니다.
step-end	애니메이션이 없고, 속성은 animation-duraton에 지정된 시간을 기다린 후 즉시 최종 값을 취합니다.
steps	속성 값이 단계적으로 변경됩니다.
cubic-bezier	임의의 애니메이션을 정의할 수 있는 베지어 곡선. 베지어 곡선 생성기 참조.

기본값: ease.

다양한 값 비교

아래의 블록 위에 마우스를 올려 모든 종류의 타이밍 함수의 작동을 확인하세요:

같이 보기