[css] easing 의 종류 및 사용방법

easing이란?

- 애니메이션 을 자연스럽게 만든다.

- 짧게 유지할 수 있는 경우를 제외하고 ease-in 또는 ease-in-out 애니메이션을 피해야함

  (사용자에게 갑갑한 느낌을 줄수 있음)

 

키워드

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

- linear : 일정

- ease-in : 서서히 시작

- ease-out : 서서히 종료

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

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

- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeInCubic
- easeOutCubic
- easeInOutCubic
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeInQuint
- easeOutQuint
- easeInOutQuint
- easeInSine
- easeOutSine
- easeInOutSine
- easeInExpo
- easeOutExpo
- easeInOutExpo
- easeInCirc
- easeOutCirc
- easeInOutCirc
- easeInElastic
- easeOutElastic
- easeInOutElastic
- easeInBack
- easeOutBack
- easeInOutBack
- easeInBounce
- easeOutBounce
- easeInOutBounce

 

※ 아직은 css에서 모든 esing을 지원하지 않는다.

    jquery를 통해 다양한 esing을 사용할수있다.

   아래 참고 사이트에 들어가면 다양한 활용예시가 나와있다. 

 

 

참고사이트 http://www.codejs.co.kr/jquery-easing-enjoy-effect/

jQuery easing의 재밌는 효과 - codeJS