[CSS] 트랜지션 스타일 (transition)

트랜지션

  - 웹 요소의 스타일 속성이 조금씩 자연스럽게 바뀌는 것

 

트랜지션을 적용할 속성 선택

선택자 { transition-property : all | none | 속성명 ; }

 

  - all (기본값)

      : 요소의 모든 속성이 트랜지션 대상이 됨

  - none

      : 아무 속성도 바뀌지 않음

  - 속성명을 콤마로 연결하여 여러 속성에 적용 가능

 

트랜지션 진행 시간 지정

선택자 { transition-duration : 시간(단위 s) ; }

 

  - 트랜지션이 여러 개라면 쉼표로 구분해서 지정

      ex) { transition-property : width, height ; transition-duration : 2s, 3s ; }

          → 2초 동안 너비 변화, 1초 동안 높이 변화

 

트랜지션 진행 속도 지정

선택자 { transition-timing-function : 속도 ; }

 

  - linear

      : 시작부터 끝까지 같은 속도로

  - ease (기본값)

      : 천천히 시작하고 점점 빨라지다가 마지막에는 천천히 끝냄

  - ease-in : 시작을 느리게 함

  - ease-out : 느리게 끝냄

  - ease-in-out : 느리게 시작하고 느리게 끝냄

 

트랜지션 지연 시간 지정

선택자 { transition-delay : 지연시간(단위 s) ; }

 

  - 지연시간 후에 트랜지션이 시작됨

 

트랜지션 관련 속성 한 번에 표기

선택자 { transition : [진행속도] [진행시간] ; }