CSS animation timing function Property

Previous Next

Home >> CSS >> CSS Properties >> CSS animation timing function Property

CSS animation-timing-function Property

The animation-timing-function is used to specify the speed curve of an animation. Speed curve is the TIME an animation uses to change from one set of CSS styles to another. It is used to make the changes smoothly.

Default Value:-

Its default value is ease.

Syntax:-

Further Explanation:-

Value	Description
linear	The animation has the same speed from start to end
ease	Default value. The animation has a slow start, then fast, before it ends slowly
ease-in	The animation has a slow start
ease-out	The animation has a slow end
ease-in-out	The animation has both a slow start and a slow end
step-start	Equivalent to steps(1, start)
step-end	Equivalent to steps(1, end)
steps(int,start\|end)	Specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. The second parameter is optional, is either the value start or end.
cubic-bezier(n,n,n,n)	Define your own values in the cubic-bezier function. Value ranges from 0 to 1.
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

Code Explanation

All Tutorials related to CSS Properties

accent-color Property in CSS align-content Property in CSS align-items Property in CSS align-self Property in CSS all Property in CSS animation Property in CSS animation-delay Property in CSS animation-direction Property in CSS animation-duration Property in CSS animation-fill-mode Property in CSS animation-iteration-count Property in CSS animation-name Property in CSS animation-play-state Property in CSS animation-timing-function Property in CSS backdrop-filter Property in CSS backface-visibility Property in CSS background Property in CSS background-attachment Property in CSS background-blend-mode Property in CSS background-clip Property in CSS background-color Property in CSS background-image Property in CSS background-origin Property in CSS background-position Property in CSS background-repeat Property in CSS background-size Property in CSS border Property in CSS border-bottom Property in CSS border-bottom-color Property in CSS border-bottom-left-radius Property in CSS border-bottom-right-radius Property in CSS border-bottom-style Property in CSS border-bottom-width Property in CSS border-collapse Property in CSS border-color Property in CSS border-image Property in CSS border-image-outset Property in CSS border-image-repeat Property in CSS border-image-slice Property in CSS border-image-source Property in CSS border-image-width Property in CSS border-left Property in CSS border-left-color Property in CSS border-left-style Property in CSS border-left-width Property in CSS border-radius Property in CSS border-right Property in CSS border-right-color Property in CSS border-right-style Property in CSS border-right-width Property in CSS border-spacing Property in CSS border-style Property in CSS border-top Property in CSS border-top-color Property in CSS border-top-left-radius Property in CSS border-top-right-radius Property in CSS border-top-style Property in CSS border-top-width Property in CSS CSS border-width Property bottom Property in CSS box-decoration-break Property in CSS box-shadow Property in CSS box-sizing Property in CSS break-after Property in CSS break-before Property in CSS break-inside Property in CSS caption-side Property in CSS caret-color Property in CSS @charset Rule in CSS clear Property in CSS clip Property in CSS color Property in CSS column-count Property in CSS column-fill Property in CSS column-gap Property in CSS column-rule Property in CSS column-rule-color Property in CSS column-rule-style Property in CSS column-rule-width Property in CSS column-span Property in CSS column-width Property in CSS columns Property in CSS content Property in CSS counter-increment Property in CSS counter-reset Property in CSS cursor Property in CSS direction Property in CSS display Property in CSS empty-cells Property in CSS filter Property in CSS flex Property in CSS flex-basis Property in CSS flex-direction Property in CSS flex-flow Property in CSS flex-grow Property in CSS flex-shrink Property in CSS flex-wrap Property in CSS float Property in CSS font Property in CSS @font-face Rule in CSS font-family Property in CSS font-feature-settings Property in CSS font-kerning Property in CSS font-size Property in CSS font-stretch Property in CSS font-style Property in CSS font-variant Property in CSS font-variant-caps Property in CSS font-weight Property in CSS gap Property in CSS grid Property in CSS grid-area Property in CSS grid-auto-columns Property in CSS grid-auto-flow Property in CSS grid-auto-rows Property in CSS grid-column Property in CSS grid-column-end Property in CSS grid-column-gap Property in CSS grid-column-start Property in CSS grid-gap Property in CSS grid-row Property in CSS grid-row-end Property in CSS grid-row-gap Property in CSS grid-row-start Property in CSS grid-template Property in CSS grid-template-areas Property in CSS grid-template-columns Property in CSS grid-template-rows Property in CSS hanging-punctuation Property in CSS height Property in CSS hyphens Property in CSS image-rendering Property in CSS isolation Property in CSS justify-content Property in CSS @keyframes Rule in CSS left Property in CSS letter-spacing Property in CSS line-height Property in CSS list-style Property in CSS list-style-image Property in CSS list-style-position Property in CSS list-style-type Property in CSS margin Property in CSS margin-bottom Property in CSS margin-left Property in CSS margin-right Property in CSS margin-top Property in CSS mask-image Property in CSS mask-mode Property in CSS mask-origin Property in CSS mask-position Property in CSS mask-repeat Property in CSS mask-size Property in CSS max-height Property in CSS max-width Property in CSS @media Rule in CSS min-height Property in CSS min-width Property in CSS mix-blend-mode Property in CSS object-fit Property in CSS object-position Property in CSS opacity Property in CSS order Property in CSS orphans Property in CSS outline Property in CSS outline-color Property in CSS outline-offset Property in CSS outline-style Property in CSS outline-width Property in CSS overflow Property in CSS overflow-wrap Property in CSS overflow-x Property in CSS overflow-y Property in CSS padding Property in CSS padding-bottom Property in CSS padding-left Property in CSS padding-right Property in CSS padding-top Property in CSS page-break-after Property in CSS page-break-before Property in CSS page-break-inside Property in CSS perspective Property in CSS perspective-origin Property in CSS pointer-events Property in CSS position Property in CSS quotes Property in CSS resize Property in CSS right Property in CSS row-gap Property in CSS scroll-behavior Property in CSS tab-size Property in CSS table-layout Property in CSS text-align Property in CSS text-align-last Property in CSS text-decoration Property in CSS text-decoration-color Property in CSS text-decoration-line Property in CSS text-decoration-style Property in CSS text-decoration-thickness Property in CSS text-emphasis Property in CSS text-indent Property in CSS text-justify Property in CSS text-overflow Property in CSS text-shadow Property in CSS text-transform Property in CSS top Property in CSS transform Property in CSS transform-origin Property in CSS transform-style Property in CSS transition Property in CSS transition-delay Property in CSS transition-duration Property in CSS transition-property Property in CSS transition-timing-function Property in CSS unicode-bidi Property in CSS user-select Property in CSS vertical-align Property in CSS visibility Property in CSS white-space Property in CSS widows Property in CSS width Property in CSS word-break Property in CSS word-spacing Property in CSS word-wrap Property in CSS writing-mode Property in CSS z-index Property in CSS

All Sections related to CSS

CSS Intro CSS Intro Quiz CSS Intro Exercise CSS Basic CSS Basic Quiz CSS Basic Exercise CSS Advance CSS Advance Quiz CSS Advance Exercise CSS3 CSS3 Quiz CSS3 Exercise CSS Properties CSS Functions CSS Selectors