Easing Functions

  • CSS3 Transition
  • CSS3 Keyframes
  • CSS3 2D Transform
  • CSS3 3D Transform
  • CSS3 Filters
  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay
  • transition shorthand
  • easing
  • linear

    linear

    Same speed throughout

    ease

    ease

    Starts and Ends with an ease
    ie train leaving, steady speed then arriving
    * this is the default function

    ease-in

    ease-in

    Starts slowly and speeds up
    ie train leaving the station

    ease-out

    ease-out

    Slows downwards the end
    ie train arrives in station

    ease-in-out

    ease-in-out

    Accelerates and decelerates
    no steady speed

    cubic-bezier

    cubic-bezier

    User defined curve
    cubic-bezier generator