코딩 자율학습 HTML + CSS + 자바스크립트: 6.6.5 transition-timing-function 속성

transition-timing-function 속성은 전환 효과의 진행 속도를 지정합니다. 속성값으로는 정해진 키워드와 cubic-bezier() 함수를 사용할 수 있습니다.

표 6-21 transition-timing-function 속성값

속성값	설명
linear	처음 속도와 마지막 속도가 일정합니다.
ease	처음에는 속도가 점점 빨라지다가 중간부터 점점 느려집니다.
ease-in	처음에는 속도가 느리지만 완료될 때까지 점점 빨라집니다.
ease-out	처음에는 속도가 빠르지만 완료될 때까지 점점 느려집니다.
ease-in-out	처음에는 속도가 느리지만 점점 빨라지다가 다시 점점 느려집니다.
cubic-bezier(p1, p2, p3, p4)	사용자가 정의한 속도로 진행합니다.

예를 들어, 다음과 같이 전환 효과가 5초 동안 발생하도록 지정했다고 합시다.

.container .bar{
  width:10px;
  transition-property:width;
  transition-duration:5s;
}
.container:hover .bar{
  width:110px;
}

신간 소식 구독하기

뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.