Animation Timing Function

Published: November 20, 2017By brooklynwriters
  • Animation Name
  • Animation Duration
  • Animation Timing Function
  • Animation Delay
  • Animation Iteration Count
  • Animation Direction
  • Animation Fill Mode
  • Animation Play State
  • Animation Event
  • Animation Event Target

Specifies the speed curve of an animation. This is used to make one set of CSS styles change into another set smoothly or jerkily (using steps).

Value Description
easeDefault. The animation has a slow start, then fast, before it ends slowly
ease-inThe animation starts slowly
ease-outThe animation ends slowly
ease-in-outThe animation starts and ends slowly
linearThe animation has the same speed throughout
step-startThe animation jerks from start to end rather than being smooth. Equivalent to 'steps(1, start)'
step-endThe animation jerks from end to start rather than being smooth. Equivalent to 'steps(1, end)'
steps(int, start|end)Custom function for defining the number of steps and direction of the jerky animation. The first value, number of steps, must be a positive number. The second value must be either 'start' or 'end'. It specifies the direction.
cubic-bezier(n,n,n,n)Custom function for fine grained control over the speed of the animation. Microthemer provides some examples to get you started.

Themeover CSS Reference

Close