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;
}