[CSS] Transition(트랜지션)

From Pixabay b3nj5m1n's Image

Transition이란?

Transition은 기본적으로, 어떤 상태에서 다른 상태로의 "변화"를 애니메이션으로 만드는 방법입니다. 변화는 이동이 될 수도 있고, 크기의 변화일 수 있고, 색깔의 변화 등 무엇이든지 될 수 있습니다. 변화가 일어나려면 기본적으로 변화하기 "전"과 "후" 그리고, "언제" 변화할지가 있어야 합니다. 이때 "언제" 변화할지를 지정하는 것이 상태(State)입니다. 예를 들어, 마우스가 올라가 있는 "상태"(:hover) 일 때 변화하도록 Transition을 지정할 수 있습니다. 상태(State)에 대해선 아래 링크에서 자세히 설명하였습니다. [CSS] States (active, focus, hover, visited, focus-within)

Transition

위 그림처럼, transition은 값으로 속성 값, 변화 시간, 변화 속도, 딜레이 시간을 갖습니다. 

 

속성 값(transition-property)

변화(transition) 효과를 줄 CSS 속성을 의미합니다. all이라고 쓰면 모든 CSS 속성에 대해 변화가 적용됩니다. 트랜지션을 적용하고자 하는 CSS 속성들을 콤마(,)를 구분자로 원하는 만큼 작성할 수 도 있습니다.

 

변화 시간(transition-duration)

변화가 일어나는데 걸리는 시간을 의미합니다. 변화(transition)가 일어나는 모든 CSS 속성에 대해 단일 변화 시간을 줄 수도 있고, 각 CSS 속성에 따라 시간을 다르게 줄 수도 있습니다.

 

변화 속도(transition-timing-fuction)

변화가 일어날 때 속도가 어떻게 바뀔지를 의미합니다. 처음에 빠르게 변화하다가 마지막에 느려질 수 돼있고, 일정한 속도로 변화가 일어날 수도 있습니다. 

*기본 옵션 종류

기본 옵션	설명
linear	변화가 일정한 속도로 진행
ease-in	속도가 점점 빨라지며 변화
ease-in-out	빨라지다 느려짐
ease-out	느려지며 부드럽게 변화
ease	기본값(default)으로 처음에 빨라지고 점점 느려짐.

ease-in-out과 ease의 차이점은 ease-in-out은 정확히 빨라지는 곡선과 느려지는 곡선이 대칭을 이룹니다. 즉, 변화 시간의 절반은 빨라지고, 절반은 느려집니다. ease는 처음에 잠시 빨라지고, 그다음부터는 쭉 느려집니다. 보통 ease-in-out을 많이 사용합니다.

딜레이 시간(transition-delay)

속성의 상태(State)가 변하고, 딜레이 시간만큼 대기한 후에 변화가 시작됩니다. 기본값(default)은 0s입니다.

 

특징

transition 속성은 state가 없는 쪽에 써야 합니다. 

ex1)  마우스를 올리면 경계선이 둥그러지는 예제

See the Pen transition_ex1 by netsus (@netsus) on CodePen.

hover 상태일 때 transition이 일어나는 예제입니다. 마우스를 Go home에 올리면 둥그레집니다. 변화하기 전의 상태는 hover가 없는 span { }에 작성하였습니다. transition의 값으로는 all 0.5s ease-in-out. 1s;를 줬습니다. 이는 모든 요소(all)에 대해 0.5초 만에 빨라졌다 느려지며(ease-in-out), 변화의 딜레이 시간은 0.1초로 하라는 의미입니다. Go home에 마우스를 올리면 0.1초 뒤에 변화가 시작되고, 마우스를 떼면, 0.1초 뒤에 원래대로 되돌아옵니다.

 

변화 속도 커스텀 사이트(matthewlein.com/tools/ceaser)

cubic-bezier: 나만의 변화 속도 조절 그래프를 그릴 수 있다.

해당 링크에서 변화 속도 그래프를 직접 조작하며, cubic-bezier 수치 가져올 수 있습니다.

 

ㅇ보통 transition에는 all과 ease-in-out을 많이 씁니다.

개별 요소 시간을 다르게 하기 위해선, 변경 전/후에 있는 요소들을 직접 transition의 값에 콤마(', ')를 구분자로 하나씩 적어야 한다.

ex2) font-size와 border-radius의 변화를 개별적으로 설정한 예제

See the Pen yLJwXra by netsus (@netsus) on CodePen.

위 ex1과 마찬가지로, 마우스를 올리면(hover) 변화가 시작됩니다. 하지만, font-size와 border-radius의 변화를 콤마(', ')를 구분자로 개별 설정하였습니다. font-size는 25px -> 50px로 변화하며 0.5초 만에 ease-in-out으로 0.1초의 딜레이 시간을 갖습니다. border-radius(경계선 모양)은 사각형 -> 둥근 모양으로 5초에 걸쳐 ease(빨라지다 느려짐)으로 딜레이 시간 없이 변화합니다.

 

마치며

이번 시간엔 CSS의 transition에 대해 알아보았습니다. transition은 변화를 유발하는 상태(State)와 변화 전, 후의 CSS를 각각 써줘야 한다는 것, 그리고 transition의 속성 값은 상태(State)가 없는 CSS 부분에 써줘야 한다는 것이 제일 중요합니다. 직접 변화를 일으켜보면 나름 신기하고 재밌습니다.

읽어주셔서 감사합니다.