{"id":21743,"date":"2015-02-03T12:35:59","date_gmt":"2015-02-03T11:35:59","guid":{"rendered":"http:\/\/tympanus.net\/codrops\/?post_type=css_reference&p=21743"},"modified":"2016-12-11T21:45:04","modified_gmt":"2016-12-11T20:45:04","slug":"animation-timing-function","status":"publish","type":"css_reference","link":"https:\/\/tympanus.net\/codrops\/css_reference\/animation-timing-function\/","title":{"rendered":"animation-timing-function"},"content":{"rendered":"
\n

\n The animation-timing-function<\/code> property is used to specify a timing function<\/em> which defines the speed over time of an object being animated. It describes how an animation<\/a> will progress over one cycle of its duration, allowing it to change speed during its course.\n <\/p>\n

\n A timing function in CSS is usually referred to easing functions<\/em>.\n <\/p>\n

\n The animation-timing-function<\/code> takes a timing function as a value, which is a mathematical function that specifies the speed over time of an object being animated. It can also be defined using one of several predefined keywords for common timing functions.\n <\/p>\n

\n If you apply more than one animation<\/a> on an element, you may specify multiple timing functions, each for a corresponding animation specified using the animation-name<\/a> property.\n <\/p>\n

\n The timing function specified applies to each iteration of the animation, not the entire animation<\/strong> in full. For example, if an animation has animation-timing-function: ease-in-out;<\/code> and <a href="http:\/\/tympanus.net\/codrops\/css_reference\/animation-iteration-count">animation-iteration-count<\/a>: 2;<\/code>, it will ease in at the start, ease out as it approaches the end of its first iteration, ease in at the start of its second iteration, and ease out again as it approaches the end of the animation.\n <\/p>\n

\n For keyframed animations, the timing function applies between keyframes rather than over the entire animation<\/strong>. In other words, the timing function is applied at the start of a keyframe and at the end of a keyframe.\n <\/p>\n

\n In addition to being able to specify a timing function for an overall animation, you can specify an animation timing function for an individual keyframe of the animation inside the keyframe rule that is used to animate the element in that keyframe as it proceeds to the next keyframe (See the Examples section below for an example). If no timing function is specified for the keyframe, the timing function specified for the overall animation is used. You can read more about this and see an example in the @keyframes<\/code><\/a> entry.\n <\/p>\n

\n It is usually more convenient to specify the animation-timing-function<\/code> in the animation<\/code><\/a> shorthand property.\n <\/p>\n<\/p><\/div>\n

\n

Official Syntax<\/h2>\n