[css] transition 효과 정리

Transition 이란?

요소의 스타일에 변화를 줄 때 시간을 정해 줌으로써 자연스럽게 변하게 하는 속성을 가진 효과이다.
그렇기 때문에 transform 과 함께 사용되는 경우가 많다.

transistion 에는 4가지의 속성이 있다.
transition-property, transition-duration, transition-timing-function, transition-timing-function

1. transition-property
변화를 주고자 하는 css 속성을 지정한다.

```

{ transition-property:값; }

```

값으로 지정할 수 있는 것으로는 none, all, 변화를 줄 css 가 있다.

none : 적용할 속성이 없음
all : 모든 속성에 변화 적용
css 속성 : 특정 속성에만 변화 적용

복수의 값을 지정할 수 있는데 이때는 ,로 나열하면 된다.

2. transition-duration
변화가 시작된 시점부터 끝날 시점까지의 시간을 지정 해주는 속성이다.
시간 단위는 s,ms로 나타낼 수 있다. s는 1초 ms는 1/1000초 이다.
,를 사용해서 복수의 값을 지정할 수 있다.

3. transition-timing-function
변화 속도의 패턴을 지정 해주는 속성이다.
이 속성에는 9개의 값이 있다.

* ease: 시작은 천천히 중간에는 빠르게 그리고 다시 끝에는 천천히 변화합니다.
* linear : 일정한 속도로 변화하게 됩니다.
* ease-in : 천천히 시작해서 빠르게 종료됩니다.
* ease-out : 빠르게 시작해서 느리게 끝납니다.
* ease-in-out : 시작, 종료 두 지점 다 천천히 변화를 가져갑니다.

* steps(단계 횟수, start 또는 end)
: 지정한 횟수 만큼 지정한 시간 동안 동일한 간격을 가지고 변화하는 속성
  start라고 지정해주면 시작과 동시에 변화가 일어나고 end라고 지정해주면 완료 시점에 마지막 스텝의 변화가 일어난다.
    
* step-start : steps(1, start)와 같다.
* step-end : step(1, end)와 같다.

* cubic-bezier(x1, y1, x2, y2)
: 어떻게 변화 할지 3차원 베지어 곡선을 이용하여 값을 지정해준다. 
  변화를 줄 시간을 x축 변화의 진행 정도를 y축으로 놓고 시작점과 끝점을 지정하고 이 두 점 사이에 변화를 줄 두 군데의 점도 지정하여 변환 타이밍을 조절한다. 이 때 지정해 줄 수 있는 값의 범위는 0~1 사이에 있는 실수이다.
  디테일한 변화를 하고자 할 때 사용된다. 

4. transition-delay
다른 요소의 효과가 발생한 뒤에 원하는 변화를 주고 싶을때 사용한다. delay 값에 시간 지정을 해주면 된다.