Transition

css 프로퍼티의 값이 변화할 때, 프로퍼티의 값의 변화가 일정시간에 걸쳐 일어나는 것을 의미한다. (= 요소가 움직이는 동안에 일어나는 일)

언제 사용할까?

예시로 :hover로 css의 프로퍼티 값을 변화시킬 때, 그 즉시발생한다.

이런 상태값을 부드럽게 변화시키고 싶다면 일정시간duraition을 추가한다.

Transition의 property

• transition-property : 트렌지션의 대상이 되는 css프로퍼티를 지정

• transition-duration : 트렌지션이 일어나는 지속시간을 s/m단위로 지정

• transition-timing-fuction : 트렌지션 효과를 위한 수치 함수를 지정

• transition-delay : 트렌지션을 시작하는 사이 대기시간을 지정

• transition(shorthand) : 모든 트렌지션 프로퍼티를 한번에 지정

1. tansitiomn-property

트렌지션의 대상이 되는 css프로퍼티명을 지정한다. 지정하지 않는 경우 모든 프로퍼티가 트렌지션의 대상이 된다. 복수로 프로퍼티를 지정하는 경우 쉼표(,)로 구분한다.

만약 layout에 영향을 주는 트렌지션 효과는 피해야한다.

브라우저는 모든 요소의 위치와 크기를 계산하는데 이것은 성능 저하의 요인이 된다.

layout에 영향을 주는 프로퍼티

width height padding margin border
display position float overflow
top left right bottom
font-size font-family font-weight
text-align vertical-align line-height
clear white-space

2. tansitiomn-duration

트렌지션이 일어나는 지속시간을 s/m단위로 지정

transition-duration 프로퍼티 값은 transition 프로퍼티 값과 1:1으로 대응한다.

transition-property: width, opacity;
transition-duration: 2s, 4s;  ///width는 2초에 걸쳐서, opacity는 4초에 걸쳐서

3. transition-timing-function

트렌지션 효과의 변화 흐름, 시간에 따른 변화 속도 리듬을 지정한다.

직접 가서 확인해 보는 것이 빠름..!

함수 치트

4. transition-delay

트렌지션을 시작하는 사이 대기시간을 지정. 프로퍼티 값이 변화하여도 즉시 트렌지션이 실행되지 않고, 일정 시간을 대기한 후 트렌지션이 실행되도록 한다.

5. transition

transition: propery duration function delay

주의!! transition-duraition은 반드시 지정해야 한다!!

지정하지 않는 경우 기본값 0이 셋팅되어 어떠한 트렌지션도 실행되지 않는다