1. Transition의 의미
어원은 이행, 변화를 의미하는데요. CSS에서는 상호작용에 의한 콘텐츠 변경의 용도로 주요 사용되는 속성으로서 해당 속성을 사용해 다양한 애니메이션 효과를 부여하는 것이 가능합니다.
이러한 효과는 주로 해당 컨텐츠에 마우스를 올렸을 때 (:hover)에나 겹치는 이미지를 자연스럽게 나타내개 할 때 주로 사용됩니다.
1. property (적용할 속성)
전환 효과를 적용 할 속성의 이름을 지정합니다. 얘를 들어 적용을 할 속성이 background-color라고 하고, 호버 선택자에 색상을 주게 되면, 해당 배경의 색상이 바뀌게 됩니다. 물론 width나 height 등의 요소를 적게 되면 해당 컨텐츠에 상호작용이 일어날 때 크기가 조절되는 효과를 줄 수도 있습니다.
또한 property에 all을 입력할 경우 특정 속성 뿐만 아니라 변화를 지정한 모든 속성에 대해서 트랜지션을 적용할 수 있습니다.
2. duration (변화되는 시간)
해당 속성의 경우 변화 될 속성의 처음부터 끝까지 도달하는 시간을 의미하는데요. 0부터 양의 정수 까지의 범위에서 0.1초 단위로 시간을 조절하는 것이 가능합니다.
3. timing-function (속도 변화)
트랜지션이 일어나는 과정에서의 속도 변화를 의미합니다. 기본값은 ease, linear, ease-in, ease-out, ease-in-out 값이 존재하는데요. 물론 cubic-bezier 함수를 사용하면 세부적인 커스터마이징이 가능하므로 이와 관련된 사이트에서 참고하여 만들 수 적용할 수 있습니다.
4. delay (시작 딜레이)
트랜지션이 시작되기 전의 딜레이 시간을 의미합니다. 단위는 function과 동일하게 s를 사용하며, 주로 배경 화면의 등장 시간을 조절하는 용도로 사용이 됩니다.
⭐ 이들 각각의 트랜지션 속성들은 transition이라는 하나의 키워드로도 단축해서 설정이 가능합니다. (예시 : transition : width 3s ease-out 3s) 또한 다른 속성들과 중복해서 작성이 가능한데, 이럴 경우 (transition : property1 duration1 timing1 delay1, property2 duration2 timing2 delay2) 처럼 각 속성 별로 값들을 따로 적어주어야 적용이 됩니다.
