전환 (transition)

01.transition

• 요소의 전환(시작과 끝)효과를 지정하는 단축 속성
• 단축형으로 작성시 필수 포함 속성: transition: 속성명 지속시간 타이밍함수 대기시간;
• 단축 속성으로 작성할 시 반드시 지속시간(transition-duration)은 포함 되어야 한다.

• 쉼표(,)로 구분하여 transition 속성에 단축 속성을 두 개 이상 적용시킬 수 있다.

• 단축 속성으로 작성할 시 반드시 지속시간을 포함 시킨다.

02.transition-duration

• 전환 효과의 지속시간을 설정
• 0s: 전환 효과 없음 (기본 값)
• 시간: 지속시간(s)을 지정

03.transition-property

• 전환 효과를 사용할 속성 이름을 지정
• all: 모든 속성에 적용 (기본값)
• 속성 이름: 전환 효과를 사용할 속성 이름 명시

• 기본적으로 all 속성이 설정되어 있지만 직접 전환 속성을 설정할 수도 있다.
• width 속성이름에 2초의 전환시간을 설정해서 가로크기 전환은 2초의 시간이 걸리지만 색상 전환은 시간 딜레이없이 바로 전환되는 것을 볼 수 있다.

03.transition-timing-fuction

• 전환 효과의 타이밍(Easing) 함수를 지정
• ease: 느리게 - 빠르게 - 느리게 (기본값)
• linear: 일정하게
• ease-in: 느리게 - 빠르게
• ease-out: 빠르게 - 느리게
• ease-in-out: 느리게 - 빠르게 - 느리게
• Easing 함수 차트

• ease-in 속성을 사용하여 느리게 -> 빠르게로 전환 효과을 준다.

04.transition-delay

• 전환 효과가 몇 초 뒤에 시작할지 대기 시간을 지정
• 0s: 대기시간 없음
• 시간: 대기시간(s)을 지정

• 0.5초 후에 1초 동안 전환 효과 발생한다.