Animation - easing

1. Easing functions

easing(timing 이라고도 함)은 애니메이션을 더욱 부드럽고 편안한 느낌이 들게 만들어서 앱 사용자에게 편안한 느낌을 주고 전반적인 사용 환경을 개선해준다.

그러나 짧게 유지할 수 있는 경우를 제외하고 ease-in 또는 ease-in-out 애니메이션을 피해야한다. 사용자에게 굼뜬 느낌을 줄 수 있기 때문이다. 

2. easing 키워드

다음은 CSS에서 사용할 수 있는 키워드 중 일부이다.

1) ease : 시작과 종료를 부드럽게

2) linear :  일정

3) ease-in : 서서히 시작 

4) ease-out : 서서히 종료

5) ease-in-out : 서서히 시작하여 서서히 종료

6) cubic-bezier(x1,y1,x2,y2) : 3차 배지에 곡선의 P1과 P2를 (x1, y1, x2, y2)로 지정

예제사이트 : http://jsfiddle.net/ununa/byLCn/

3. CSS에서 easing function

CSS의 transition과 animation 속성에서 easing function 을 사용할 수 있다. 그러나 CSS는 아직 모든 easing을 지원하지 않는다.

그래서 bezier curve 표기법과 같은 easing function 을 직접 지정해야한다. 

> Bezier curve 표기법

p {  

-webkit-transition: all 600ms easing’s Bezier curve;

      transition: all 600ms easing’s Bezier curve;

 }