➊ transition-property 속성은 변화를 주려는 CSS 속성을 말합니다. 속성을 쉼표(,)로 구분하여 여러 개 지정할 수 있습니다. 변화를 주는 속성이 많을 때는 all을 속성값으로 입력합니다.

➋ transition-duration 속성은 변화가 일어나는 시간을 말합니다. transition- 속성을 제대로 적용하려면 transition-duration 속성을 꼭 명시해야 합니다. 기본값이 0으로 설정되어 있으므로 transition-duration 속성을 적용하지 않으면 효과가 나타나지 않습니다.

➌ transition-timing-function 속성은 변하는 속도를 어떻게 가속시키고 감속시킬지를 말합니다.

표 10-1에서 transition-timing-function 속성의 주요 속성값을 확인할 수 있습니다.

표 10-1 transition-timing-function 속성의 주요 속성값

linear	시작 지점부터 종료 지점까지 같은 속도로 변화가 일어납니다.
ease	초반은 느리게, 중반은 빠르게, 종반은 느리게 변화가 진행됩니다.
ease-in	시작 지점의 변화가 천천히 진행됩니다.
ease-out	종료 지점의 변화가 천천히 진행됩니다.
ease-in-out	시작 지점과 종료 지점의 변화가 천천히 진행됩니다.

 

➍ transition-delay 속성은 변화가 시작되는 시간을 지연시킬 때 사용합니다. 기본값은 0s로 설정되어 있습니다.

➎ #transition:hover는 ‘#transition 영역에 마우스 포인터를 올렸을 때’를 뜻합니다. :hover는 ‘마우스 포인터를 올렸을 때’라는 의미를 담은 가상 클래스입니다. 여기서 가상 클래스란 어떤 상태를 지정할 때 사용하는 CSS 언어를 말합니다.