CSS Animation - timing function?
CSS 애니메이션은 사이트에 생동감을 불어넣고 조금 더 다채로워 보이는 효과를 쉽게 줄 수 있기 때문에 흔하게 사용하고 있지만, 정작 timing function을 적을 때 만큼은 별 생각 없이 ease, 혹은 ease-in-out을 휙 적고 말기 십상이라 언젠가 한번은 탐구해보고 싶었다. 그래서 timing function이 뭐가 다른 건데?
아래의 코드펜은 MDN docs :: animation-timing-function에서 소개하는 syntax 순서대로 timing function를 적용해 본 결과이다. 사실 모아 놓으면 멋있길래 한번쯤 해보고 싶었다.
Easing Function
ease를 사전에 쳐보고 나서야 나에게 easing function이라는 의미가 조금 더 와닿았다.
ease
명사
1. 쉬움, 용이함, 편의성
2. (근심걱정 없이) 편안함, 안락함동사
1. 편해지다[편하게 해 주다]; (고통불편 등이[을]) 덜해지다[덜어 주다]
2. 조심조심[천천히] 움직이다[옮기다]
3. 수월[용이]하게 하다
4. 느슨하게 풀다; 느슨해지다
5. (가격이[을]) 낮아지다[낮추다]; (가치가[를]) 하락하다[하락시키다]
출처_네이버 영어사전 - 옥스포드
인터넷에 easing의 뜻을 검색해 보면, 조금 더 부드럽고 자연스러운 애니메이션으로 사용자에게 편안함을 주는 기법이라는 뉘앙스의 설명도 가끔씩 나오는데, 그보다는 그냥 동사2나 동사4번의 원 의미에 가까운 것 같다.
Keyword values
Non-step keyword value
non-step keyword value는 전부 특정 cubic Bézier curve를 상수화한 값이다.
ease
cubic-bezier(0.25, 0.1, 0.25, 1.0)과 동일하다.
가장 기본이 되는 값으로, 점점 속도가 빨라지다가 애니메이션이 진행되는 중간 시점을 기준으로 다시 점점 느려진다.
linear
cubic-bezier(0.0, 0.0, 1.0, 1.0)과 동일하다.
애니메이션이 진행되는 내내 일정한 속도를 유지한다.
ease-in
cubic-bezier(0.42, 0, 1.0, 1.0)과 동일하다.
아주 느리게 시작해서 애니메이션이 진행되면서 속도가 점점 빨라진다.
ease-out
cubic-bezier(0, 0, 0.58, 1.0)과 동일하다.
ease-in과 반대로, 아주 빠르게 시작해서 속도가 점점 느려진다.
ease-in-out
cubic-bezier(0.42, 0, 0.58, 1.0)과 동일하다.
ease와 마찬가지로 속도가 점차 빨라지다가 다시 느려지나, ease보다 시작 속도가 느리다.
Step keyword value
step keyword value는 마찬가지로 전부 steps를 상수화 한 값이다.
step-start
steps(1, jump-start)와 동일하다.
step-end
steps(1, jump-end)와 동일하다.
Functions values
cubic-bezier(p1, p2, p3, p4)
cubic Bézier curve의 값을 사용자가 직접 입력할 수 있으며, p1과 p3는 반드시 0과 1 사이의 값이어야 한다.
MDN 문서 하단 Cubic-Bezier 예제에는 p2가 0보다 작으면 원 애니메이션 방향의 반대로 움직이고 p4가 1보다 크면 의도했던 끝 지점을 뚫고 나가는 예시도 확인할 수 있다. (이를 잘 활용하면 bounce 효과도 cubic-bezier로 줄 수 있지 않을까 싶다.)
cubic bazier curve 그래프와 이를 활용한 애니메이팅에 대해서는 다음 사이트에서 더 자세히 확인할 수 있다.
steps(n, <jumpterm>)
steps timing function의 경우, 전체 애니메이션 시간을 동일한 간격으로 나누어 정지점을 만드는 방식이다. 이때 몇 개의 정지점을 어디서 시작하고 어디서 끝날지는 n과 jumpterm에 따라 달라진다.
예를 들어, 위 codepen에서 steps-jump-start는 0% 지점에서 시작하여 20%-40%-60%-80%-100%-100%의 위치에서 멈췄지만, steps-jump-end는 0% 지점에서 시작하여 0%-20%-40%-60%-80%-100%의 위치에서 멈췄다.
jump-start
애니메이션이 시작될 때 첫 jump가 발생하는 left-continuous function이다.
jump-end
애니메이션이 끝날 때 마지막 jump가 발생하는 right-continuous function이다.
jump-none
애니메이션이 시작하거나 끝나는 양 끝에 jump가 없는 대신, 0% 지점과 100% 지점을 애니메이션 시간의 1/n 동안 유지한다.
jump-both
애니메이션 시작 지점과 끝 지점에서 모두 jump를 하는 방식이다.
start
jump-start와 동일하다.
end
jump-end와 동일하다.
References
