CSS transition

문법

transition: property duration timing-function delay

트랜지션 효과를 보기 위해 반드시 입력해야 하는 값은 duration이다. 나머지는 입력하지 않아도 기본값이 적용된다.

1. property

변화될 프로퍼티를 지정한다. 기본값은 all 이다. 지정될 수 있는 값은 한정적인데, 아래와 같다. 하지만 주로 all을 사용한다.

// Box model
width height max-width max-height min-width min-height
padding margin
border-color border-width border-spacing
// Background
background-color background-position
// 좌표
top left right bottom
// 텍스트
color font-size font-weight letter-spacing line-height
text-indent text-shadow vertical-align word-spacing
// 기타
opacity outline-color outline-offset outline-width
visibility z-index
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. duration

트랜지션이 일어나는 지속시간을 s나 ms 단위로 지정. 기본값은 0s 이고, 이 경우 아무 효과도 볼 수 없다.

3. timing-function

변화하는 방식

ease	기본값. 느리게 시작하여 점점 빨라졌다가 느리지면서 종료한다.
linear	시작부터 종료까지 등속 운동을 한다.
ease-in	느리게 시작한 후 일정한 속도에 다다르면 그 상태로 등속 운동한다.
ease-out	일정한 속도의 등속으로 시작해서 점점 느려지면서 종료한다.
ease-in-out	ease와 비슷하게 느리게 시작하여 느리지면서 종료한다.

4. delay

s, ms 단위로 지정한다. 그만큼 대기한 후 트랜지션이 실행된다.