--- title: "CSS animation-timing-function Property Tutorial" url: https://weworkworldwide.com/tutorials/css-animation-timing-function-property-tutorial/ description: "CSS animation-timing-function Property Tutorial: In this section, we will learn what the animation-timing-function property is and how to use it in CSS." date: 2026-10-26T17:00:04+00:00 source: https://weworkworldwide.com/llms.txt --- # CSS animation-timing-function Property Tutorial In this section, we will learn what the animation-timing-function property is and how to use it in CSS. Click here to run the example of animation-timing-function property. ## CSS animation-timing-function Property Definition and Usage When we apply an *animation* to an element, by default, the movement of this animation happens in “ease” way. ``` line-numbers ``` But as the picture above shows, there are other types of animation movements and CSS provided a property named `animation-timing-function` by which we can set these values for an animation and create a different type of movement. ## CSS animation-timing-function Property Syntax ``` line-numbers animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit; ``` ## CSS animation-timing-function Property Value Here’s the list of values we could use for this property: [TABLE] ## Example: animation-timing-function property in CSS ``` line-numbers CSS is fun :) ``` ## CSS cubic-bezier() Function: There’s a CSS function called ` cubic-bezier()` that can also be used for the value of this property. Using this function, we can create our own type of speed for an animation. This function takes 4 values each ranged from 0 to 1. But setting those values is little confusing and it’s best to use tools that are already available. Two of them are Chrome’s Styles pane and Firefox’s Rules pane. ## Example: cubic-bezier() function in CSS ``` line-numbers CSS is fun :) ``` In the example above we’ve set four values in cubic-bezier() function but those might not be what we want. If this example is running in Firefox bowser, we can right click on the
  • element of the page and select Inspect-Element (just like the way picture below shows): ``` line-numbers ``` Then in the opened window, we can select the icon declared in the picture below and start to visually modifying the values set in cubic-bezier() function. ``` line-numbers ``` Also, if the example above is running in the Chrome browser, we can right click on the
  • element and select “inspect” (just like the picture below). ``` line-numbers ``` Then in the opened window, we can select the icon declared in the picture below and start to visually modifying the values set in cubic-bezier() function. ``` line-numbers ``` Other browsers like Safari and Opera have the same editor that you can find and use them in order to set the value for cubic-bezier() function. ## CSS steps() Function: Other than values mentioned so far, the `animation-timing-function` property also takes another function as its value that is called `steps( )`. ``` line-numbers ``` ## CSS steps() Function Parameters: This function takes 2 arguments (or parameters): - **number**: which is the number of steps that an animation should be completed with. - **keyword**: the value for this part is either “start” or “end” indicating whether each change should take place at the start or end of each step. ## Example: using steps() function in CSS ``` line-numbers CSS is fun :) ``` If you run this example you’ll see that instead of fluidly moving along, the animation is divided into three steps (because of the value 3 that we set for steps() function). We can also use two values named “step-start” which is equal to “steps(1, start)” and “step-end” which is equal to “steps(1, end)”. ## Example: CSS steps() function in animation ``` line-numbers CSS is fun :) ```