bar 클래스가 있는 태그의 너비가 처음에는 10px인데, 5초 뒤에는 110px이 됩니다. 그러면 5초 동안 100px이 증가(110px - 10px)하므로 이론상 1초에 20px씩 증가하면 됩니다. 이때, 증가하는 값의 속도를 transition-timing-function 속성이 제어합니다.
다음 코드는 같은 시간 동안 같은 값으로 발생하는 전환 효과가 서로 다른 속도로 진행되도록 제어합니다.
06/06/transition-timing-function.html
.bar:nth-child(1){ /* 첫 번째 bar 클래스 요소 선택 */
transition-timing-function:linear;
}
.bar:nth-child(2){ /* 두 번째 bar 클래스 요소 선택 */
transition-timing-function:ease;
}
.bar:nth-child(3){ /* 세 번째 bar 클래스 요소 선택 */
transition-timing-function:ease-in;
}
.bar:nth-child(4){ /* 네 번째 bar 클래스 요소 선택 */
transition-timing-function:ease-out;
}
.bar:nth-child(5){ /* 다섯 번째 bar 클래스 요소 선택 */
transition-timing-function:ease-in-out;
}