애니메이션은 생각보다 간단하게 구현할 수 있다.
왼쪽에서 오른쪽으로 넓어지는 애니메이션, Header에 메뉴에 :hover를 했더니 아래로 내려오는 애니메이션 정도의 smooth한 변화는 Transition을 사용하여 간단하게 구현가능하다.
CSS단에서 간단하게 이루어지는 것이다.
Transition의 하위 속성으로는 기본적으로 4가지다.
TOC
- Transition-property(변화 감지할 속성)
- Transition-duration(지속시간)
- Transition-timing-function(변화 방법)
- Transition-delay(지연시간)
- Transition shorthand
Transition-property(변화 감지할 속성)
Transition을 적용할 CSS 속성명을 명시한다.
나열한 속성들은 어떤 행위를 하게되면 부드럽게 변화를 한다.
단일 속성이 가능하지만 다중으로도 가능하다.
Transition-duration(지속시간)
Transition이 일어나는 지속 시간을 명시한다.
Transition동안 모든 속성에 적용하는 단일 지속 시간을 명시하거나,
다른 주기로 각 속성이 트랜지션하게 하는 여러 지속 시간을 명시할 수 있다.
시간이 작을수록 빠르게 끝난다.
Transition-timing-function(변화 방법)
Timing functions은 트랜지션의 중간값을 계산하는 방법을 명시한다.
대부분의 타이밍 함수는 큐빅 베이지어(cubic bezier) 를 정의하는 4개의 값에 의해 정의되므로 상응하는 함수의 그래프로 제공해서 명시할 수 있다.
Easing Functions Cheat Sheet에서 이징(easing, 역자주: 시간에 따른 파라미터 값의 변화율을 명시하는 함수)을 선택할 수도 있다.
아래의 사이트를 이용하게 되면 쉽게 원하는 값을 만들 수 있다.
Transition-delay(지연시간)
속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의한다.
시간이 길어질수록 반응하는데 기다리는 시간이 길어진다.
Transition shorthand
위에 처럼 한줄로 표현이 가능하다. 물론 순서는 지켜서 작성해야 한다.
