이징(easing)은 애니메이션이 진행되는 동안 변화의 속도가 어떻게 달라질지 정하는 방식이다. 같은 시작점과 끝점, 지속 시간이어도 움직임의 인상이 달라진다.

• 일정한 속도로 이동하는 경우와 천천히 출발해 빨라지는 경우가 있다. 서랍이 멈추는 느낌이나 요소가 나타나는 흐름을 다르게 만들 수 있다.
• CSS에서는 linear, ease-in, ease-out 등으로 진행 방식을 지정할 수 있다. 베지에 곡선이나 단계 함수로 더 구체적으로 정하기도 한다.
• 전환 효과는 이징뿐 아니라 시간과 이동 거리의 영향을 받는다. 효과가 조작 결과를 기다리게 하거나 움직임을 불편하게 느끼는 사람을 방해하지 않는지도 살핀다.

참고

• MDN: 이징 함수

#CSS #애니메이션 #기초