# Creating custom easing effects in CSS animations using the linear() function

DevFeed: [Creating custom easing effects in CSS animations using the linear() function](<https://devfeed.tech/articles/creating-custom-easing-effects-in-css-animations-using-the-linear-function-4038.md>)

Original publisher: [Read original article](<https://developer.mozilla.org/en-US/blog/custom-easing-in-css-with-linear/>)

Author: michelle-barker

Published: 2023-08-01T00:00:00Z

Content type: tutorial

Language: en

Sources: [MDN Blog](<https://devfeed.tech/sources/mdn-blog.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [css](<https://devfeed.tech/tags/css.md>), [css-animations](<https://devfeed.tech/tags/css-animations.md>), [techniques](<https://devfeed.tech/tags/techniques.md>), [ui](<https://devfeed.tech/tags/ui.md>)

## AI overview

This tutorial explains CSS animation easing and introduces the linear() timing function for creating custom easing effects. It compares linear() with established CSS easing approaches and discusses practical animation uses.

## Source excerpt

The new CSS linear() timing function enables custom easing in animations. Explore how linear() works compared with other timing functions used for easing, with practical examples.