Transition

Transition이란?

Transition의 사전적 의미는 "전이, 이행"이라는 뜻을 가지고 있다. CSS 속성인 Transition은 한 상태에서 다른 상태로 변형될 때 일정 시간 동안 변화는 과정을 말한다.

 

적용될 대상은 초기/종료 상태의 스타일과 Transition 속성 정의가 필요하며,  애니메이션 발생을 위한 가상 선택자(:hover 등) 또는 js 방아쇠(Trigger)가 필요하다.

 

---

 

Transition 지원범위

Transition은 IE브라우저에서 10이상부터 지원한다.

 

---

 

Transition 5가지 속성

  (1) transition-property

• CSS 속성을 지정함
• 기본값 :  all (모든 속성에 적용)

transition-property: none | all | property | initial | inherit;

/* 속성 1개 이상 적용 가능 */
transition-property: background-color, width;

 

  (2) transition-duration

• 실행 시간(필수)
• 기본값 : 0s

transition-duration: time | initial | inherit;

/* 초 단위(s), 밀리 초 단위(ms)단위로 적용 가능 */ 
transition-duration: .5s, 500ms;

 

  (3) transition-timing-function

• 가속, 감속 설정
• 기본값 : ease

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | initial | inherit;

 

  (4) transition-delay

• 실행 지연 시간
• 기본값 : 0s

transition-delay: time | initial | inherit;

/* 초 단위(s), 밀리 초 단위(ms)단위로 적용 가능 */ 
transition-delay: .5s, 500ms;

 

  (5) transition

• 개별 속성을 축약하여 한 줄의 코드로 작성 가능

transition: property duration timing-function delay | initial | inherit;

 

---

 

적용 예시

/* 개별 트랜지션 선언 시 */
transition-property: width;  
transition-duration: .5s;
transition-timing-function: ease; 
transition-delay: 1s; 	

/* 트랜지션 속기형(권장순서: property duration timing-fn delay) */
transition: width .5s ease 1s;

 

 

---

 

 

 

[ 출처 ]

BoostCourse 웹 UI 개발 : https://www.boostcourse.org/web344/lecture/60530