CSS 속성(9) - 전환(transition)

전환(transition)

transition는 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성입니다.

transition-property: 속성명,

transition-duration: 지속시간,

transition-timing-function: 타이밍함수,

transition-delay: 대기시간

등 개별 속성이 있습니다.

transition 단축형으로 작성할 때, 지속시간은 필수로 작성해야 됩니다.

 

transition-duration

transition-duration는 전환 효과의 지속시간을 지정합니다.

0s란 기본값(전환효과 없음)이 들어 있으며,

원하는 지속시간을 초단위(s)을 지정할 수 있습니다.

transition: 1s;

위에 예시처럼, transition속성에 1s만 작성했습니다.

너비도 천천히 전환되고 색상도 천천히 전환된 것을 확인할 수 있습니다.

 

transition-property

transition-property는 전환 효과를 사용할 속성 이름을 지정합니다.

all란 기본값(모든 속성에 적용)이 들어 있으며,

전환 효과를 사용할 속성 이름을 명시해도 됩니다.

예를 들면, 가로 전환 원하면 width로 작성하면 됩니다.

transition: width 1s;

transition-property 속성에 width를 추가했습니다.

너비는 천천히 전환하는데, 색상은 순간에 변했습니다.

 

transition-property 개별 지정

예시에 나온 것 처럼 width의 전환효과가 0.5s를 거치고(소숫점은 0을 생략할 수 있음),

color의 전환효과가 2s를 거치게 개별 지정 가능합니다.

 

transition-timing-function

transition-timing-function는 전환 효과의 타이밍(Easing) 함수를 지정합니다.

속도 도형	값	속도	함수
	ease(기본값)	느리게 - 빠르게 - 느리게	cubic-bezier(0.25, 0.1, 0.25, 1)
	linear	일정하게	cubic-bezier(0, 0, 1, 1)
	ease-in	느리게 - 빠르게	cubic-bezier(0.42, 0, 1, 1)
	ease-out	빠르게 - 느리게	cubic-bezier(0, 0, 0.58, 1)
	ease-in-out	느리게 - 빠르게 - 느리게	cubic-bezier(0.42, 0, 0.58, 1)
	cubic-bezier(n, n, n, n)	자신만의 값을 정의(0~1)
	steps(n)	n번 분할된 애니메이션

easing함수를 이해하기 위해 아래 3개의 사이트를 소개해드립니다.

1.Easing 함수 차트 시트 - 시각적으로 어떻게 적용되는지 직접 확인할 수 있음

2. Easing 함수 CSS stylesheet - CSS에 입력할 수 있는 Easing 함수 정보 있음

3. Easing 함수의 기본 - CSS에서 사용할 수 없지만 customized를 통해 원하는 효과 만들 수 있음

 

transition-delay

transition-delay는 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정합니다.

0s란 기본값(대기시간 없음)이 들어 있으며,

원하는 지속시간을 초단위(s)을 지정할 수 있습니다.

transition-delay: 1s;

위에 예시처럼, 대기시간이 1s를 적용했습니다.

참고로, transition속성에 시간 2개가 있으면 앞에거는 duration이고 뒤에는 delay입니다.