Transition
트랜지션(Transition)은 CSS의 속성값이 변화할 때, 속성 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다.
- 다음 코드는 div 요소가 hover 상태가 될 때, 요소의 모양과 색상이 변하도록 작성된 코드이다.
- CSS 프로퍼티가 변경되면 변경에 따른 변화(Transition)는 지체없이 즉시 일어난다.
- 위 코드에서 hover 상태가 되면 border-radius , background 값이 즉시 변경된다.
트랜지션(transition)은 상태 변화에 동반하여 변경되는 CSS 속성값에 의한 변화를 부드럽게 하기 위해 애니메이션 속도를 조절한다 즉, 일정 시간(duration)에 걸쳐 일어나도록 한다.
위 코드에 트랜지션(transition)을 적용해보자 !
프로퍼티 값의 변화를 2초에 걸쳐 이루어지도록 설정하였다.
Transition의 프로퍼티 살펴보기
| 프로퍼티 | 설명 | 기본값 |
|---|---|---|
| transition-prorerty | 트랜지션의 대상이 되는 CSS프로퍼티 지정 | all |
| transition-duration | 트랜지션 시작 지속시간을 초,밀리초 단위로 지정 | 0s |
| transition-timing-function | 트랜지션 효과를 위한 수치 함수 지정 | ease |
| transition-delay | 트랜지션 변화 시점, 실제 시작하는 사이에 대기 시간을 초, 밀리초 단위로 지정 | 0s |
| transition | 모든 트랜지션 프로퍼티를 한번에 지정한다 |
1) Transition-property
transition-property 프로퍼티는 트랜지션의 대상이 되는 CSS 프로퍼티명을 지정한다. 지정하지 않는 경우에는 default 값으로 all이 지정되어 모든 프로퍼티가 트랜지션의 대상이 된다.
복수의 프로퍼티를 지정하는 경우에는 쉼표(,)로 구분한다.
transition-property: width, background-color, margin ......등등;- 주의사항은 모든 CSS 프로퍼티가 트랜지션의 대상이 될 수 없다.
- 예를 들어 width, font-size 등은 하나의 범주안에서 값이 변하지만, display 프로퍼티는 그렇지 않다.
2) Transition-duration
transition-duration 프로퍼티는 트랜지션에 일어나는 지속시간(duration)을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다. 지정하지 않을 경우 기본값 0s 가 적용되어 어떠한 트랜지션 효과도 볼 수 없다.
- transition-property 값이 현재 width, opacity 이다.
- transition-duration 은 각각 width, opacity에 대응되는 시간에 따라 수행되도록 지정된 것이다.
3) transition-timing-function
트랜지션 효과의 변화 흐름, 시간에 따른 변화 속도와 같은 일종의 변화와 리듬을 지정함
대부분 큐빅 베이지어(cubic bezier)를 정의하는 네 점에 의해 정의되고, 5개의 키워드가 제공된다. default 값은 case이다.
| 속성값 | 효과 |
|---|---|
| ease | default, 느리게 시작하여 점점 빨라졌다가 느려지며 종료 |
| linear | 시작부터 종료까지 일정한 속도 |
| ease-in | 느리게 시작한 후 점진적 가속화 |
| ease-out | 빠르게 시작하여, 점진적 감속화 |
| ease-in-out | ease와 비슷하지만 더 뚜렷 , 전환이 빠르지만 끝까지 점진적 감속 |
4) transition-delay
프로퍼티가 변화한 시점과 트랜지션이 실제로 시작하는 사이 대기 시간을 초, 밀리 초 단위로 지정한다 즉, 프로퍼티 값이 변화해도 즉시 트랜지션이 실행되는 것이 아니라 delay 만큼 기다렸다가 실행된다.
5) transition
모든 트랜지션 프로퍼티를 한 번에 지정할 수 있는 프로퍼티로 값을 지정하지 않은 프로퍼티는 기본값이 지정된다.
transition: property duration function delay
