[CSS3] Transition CSS 트랜지션

Transition

CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공.

속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어납니다. CSS 트랜지션을 이용하면, 모두 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어납니다.

 

Transition 속성

1. transition 사용하기

- transition을 사용하면 제공되는 모든요소가 기본으로 사용된다.

transition: 1s 2s;  /* duation, delay */

 

 

2. transition-property: all; 모든요소의 transition을 사용하겠다.

transition-property: all /* 모든요소 사용 */

 

3. transition-duration 재생시간 

transition-duration: 1s;

 

4. transition-timing-function  가속도

transition-timing-function: ease;    /*기본값*/
transition-timing-function: linear;  /*등속도(동일한속도)*/
transition-timing-function: ease-in-out;
transition-timing-function: cubic-bezier(0.01, 0.82, 0.54, 1.19);

개발자도구에서 속성값 ease앞에 있는 아이콘을 클릭하여 cubic bezier Editor를 열면

transition 의 동작을 나타내주는 그래프를 볼 수 있고 그래프의 각 x축과 y축에있는 원형을 움직여 효과를 변경해줄 수 있다. 

 

5. transition-delay: 시작시간

transition-delay: 2s; /* 2초 후에 실행된다*/

 

width, backround-color, font-size 등 수치로 표현되는 변화값을 transition 줄 수 있다.