Easing (or timing function) is what makes animations and motions look natural and clean. Nohthing really moves linearly in our physical world or else will look unnatural. Motions that are linear usually trigger suspicion in our brain. When we open a drawer or throw a ball, there is always a change in the speed over time and in general we specify the progress or the rate of change of a parameter over time using easing functions.
Following is the list of some default easing functions and also you can utilize the bezier curve to create your own custom versions.
Time Progress
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
  • javascript
  • general description
        
        
  • t: current time/currnet step
  • b: starting position
  • c: amount of change (end - start)
  • d: total animation time/steps
Example1: http://kodhus.com/kodity/kod/codify/fYTDRN
Example2: http://www.kodhus.com/kodity/kod/codify/QXqmPG/layout/5
animation Easing functions extended!