The "animation-timing-function" CSS Property

ExperimentalNew in CSS3

This property describes how the animation will progress over one cycle of its duration. The initial/default value is 'ease'.

Values for "animation-timing-function"

CSS Level	Value
CSS 2.1	(invalid)
CSS3	<single-timing-function>#, where <single-timing-function> is defined by the 'single-transition-timing-function' property ("ease", "linear", "ease-in", "ease-out", "ease-in-out", steps(), cubic-bezier(), etc.)

Notes

• So that animations work in major browsers, be sure to use the "animation-timing-function" property and the equivalent proprietary properties like "-moz-animation-timing-function", "-o-animation-timing-function", and "-webkit-animation-timing-function" ("-ms-animation-timing-function" is not needed).

Recommended Links

• CanIUse.com: Search "animation-timing-function" (browser compatibility information)
• CanIEmail.com: Search "animation-timing-function" (email client compatibility information)
• SitePoint: Build Awesome Apps with CSS3 Animations
• CSS3: animation-timing-function property
• MDN: animation-timing-function property

Search Engine Links (for more information)

• Bing "CSS animation-timing-function property"
• Google "CSS animation-timing-function property"