rick@tillitsdone.com

+66824564755

Scroll to discover

Mastering CSS Animation-Timing-Function for Dynamic Web Design

Discover how to use the CSS animation-timing-function property to create dynamic animations.

Explore options like linear, cubic-bezier, and step functions for smooth transitions.

Introduction to `animation-timing-function` in CSS

The animation-timing-function property in CSS allows you to control how animations progress over time. By setting this property, you can make animations speed up, slow down, or maintain a steady pace, enhancing the visual appeal of your website.

Specification

The animation-timing-function property is part of the CSS Animations Level 1 specification. It defines how animations progress, offering various predefined timing functions like ease, linear, ease-in, ease-out, and ease-in-out. You can also create custom timing functions using cubic-bezier and steps.

Description

The animation-timing-function property specifies how an animation’s values are calculated over time. It defines the speed curve of the animation, determining how it progresses from start to finish. This property is essential for creating smooth and dynamic animations.

Easing functions control the rate of change of the animation. You can make animations start slow and speed up, maintain a constant speed, or slow down towards the end. This flexibility allows you to tailor the animation’s behavior to match the desired effect.

Syntax

The syntax for the animation-timing-function property is straightforward:

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;

Explanation of Syntax

linear: The animation maintains a constant speed.
ease: The animation starts slowly, speeds up in the middle, and then slows down at the end (default).
ease-in: The animation starts slowly and then speeds up.
ease-out: The animation starts quickly and then slows down.
ease-in-out: The animation starts slowly, speeds up in the middle, and then slows down at the end.
step-start: The animation jumps immediately to the end state at the start of the keyframe animation.
step-end: The animation jumps to the end state at the end of the keyframe animation.
steps(int, start | end): Specifies a stepping function with the number of steps and the position of the start or end.
cubic-bezier(n, n, n, n): Defines a custom timing function using a cubic-bezier curve.
initial: Sets the property to its default value.
inherit: Inherits the property from its parent element.

Example Usage

Linear Easing Function

This example shows how to use the linear easing function to create an animation that progresses at a constant speed.

<!DOCTYPE html>
<html>
<head>
    <style>
        .linear-animation {
            width: 0;
            height: 50px;
            background-color: lime;
            animation: widthAnimation 5s linear forwards;
        }

        @keyframes widthAnimation {
            from {
                width: 0;
            }
            to {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="linear-animation"></div>
</body>
</html>

Cubic-Bézier Easing Function

This example showcases how to use the cubic-bezier easing function to create a custom animation timing curve.

<!DOCTYPE html>
<html>
<head>
    <style>
        .custom-easing {
            width: 0;
            height: 50px;
            background-color: orange;
            animation: widthAnimation 5s cubic-bezier(0.17, 0.67, 0.83, 0.67) forwards;
        }

        @keyframes widthAnimation {
            from {
                width: 0;
            }
            to {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="custom-easing"></div>
</body>
</html>

Step Easing Function

This example demonstrates how to use the steps easing function to create an animation that progresses in discrete steps.

<!DOCTYPE html>
<html>
<head>
    <style>
        .step-animation {
            width: 0;
            height: 50px;
            background-color: red;
            animation: widthAnimation 5s steps(4, end) forwards;
        }

        @keyframes widthAnimation {
            from {
                width: 0;
            }
            to {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="step-animation"></div>
</body>
</html>

Comparing Easing Functions

This example compares the effects of different easing functions on the same animation.

<!DOCTYPE html>
<html>
<head>
    <style>
        .linear-animation {
            width: 0;
            height: 50px;
            background-color: lime;
            animation: widthAnimation 5s linear forwards;
        }

        .custom-easing {
            width: 0;
            height: 50px;
            background-color: orange;
            animation: widthAnimation 5s cubic-bezier(0.17, 0.67, 0.83, 0.67) forwards;
        }

        .step-animation {
            width: 0;
            height: 50px;
            background-color: red;
            animation: widthAnimation 5s steps(4, end) forwards;
        }

        @keyframes widthAnimation {
            from {
                width: 0;
            }
            to {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="linear-animation"></div>
    <div class="custom-easing"></div>
    <div class="step-animation"></div>
</body>
</html>

Complex Animation with Multiple Keyframes

This example demonstrates a more complex animation using multiple keyframes and the linear easing function.

<!DOCTYPE html>
<html>
<head>
    <style>
        .complex-linear-animation {
            width: 0;
            height: 50px;
            background-color: lime;
            animation: complexWidthAnimation 10s linear forwards;
        }

        @keyframes complexWidthAnimation {
            0% {
                width: 0;
                background-color: lime;
            }
            25% {
                width: 25%;
                background-color: yellow;
            }
            50% {
                width: 50%;
                background-color: orange;
            }
            75% {
                width: 75%;
                background-color: red;
            }
            100% {
                width: 100%;
                background-color: purple;
            }
        }
    </style>
</head>
<body>
    <div class="complex-linear-animation"></div>
</body>
</html>

Formal Definition

The animation-timing-function property in CSS is formally defined in the CSS Animations Level 1 specification. This property specifies the speed curve of an animation, determining how the animation progresses over its duration. It defines the timing of intermediate keyframes and the pacing of the animation.

Formal Syntax

The formal syntax for the animation-timing-function property is as follows:

animation-timing-function =
  <easing-function> [, <easing-function>]*

<easing-function> =
  <linear-easing-function> |
  <cubic-bezier-easing-function> |
  <step-easing-function>

<linear-easing-function> =
  linear |
  <linear()>

<cubic-bezier-easing-function> =
  ease | ease-in | ease-out | ease-in-out |
  <cubic-bezier()>

<step-easing-function> =
  step-start | step-end |
  <steps()>

<linear()> =
  linear( [<number> <percentage>]{1,2} [, <number> <percentage>]* )

<cubic-bezier()> =
  cubic-bezier( [<number [0,1]> , <number> , <number [0,1]> , <number>] )

<steps()> =
  steps( <integer> , <step-position>? )

<step-position> =
  jump-start | jump-end | jump-none | jump-both | start | end

Explanation of Syntax

<easing-function>: Represents the various easing functions that can be used to control the animation’s timing.
<linear-easing-function>: Represents functions that interpolate linearly between provided easing stop points.
<cubic-bezier-easing-function>: Represents functions that define a custom timing curve using a cubic-bezier curve.
<step-easing-function>: Represents functions that divide the input time into a specified number of equal-length intervals.

`<linear-easing-function>`

linear: Equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0), the animation maintains a constant speed.
<linear()>: Interpolates linearly between provided easing stop points. Each stop point is a pair of an output progress and an input percentage.

`<cubic-bezier-easing-function>`

ease: Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0), the animation starts slowly, speeds up in the middle, and then slows down at the end (default).
ease-in: Equivalent to cubic-bezier(0.42, 0, 1.0, 1.0), the animation starts slowly and then speeds up.
ease-out: Equivalent to cubic-bezier(0, 0, 0.58, 1.0), the animation starts quickly and then slows down.
ease-in-out: Equivalent to cubic-bezier(0.42, 0, 0.58, 1.0), the animation starts slowly, speeds up in the middle, and then slows down at the end.
<cubic-bezier()>: Defines a custom timing function using a cubic-bezier curve. The four values represent the coordinates of two control points that define the curve.

`<step-easing-function>`

step-start: Equivalent to steps(1, jump-start), the animation jumps immediately to the end state at the start of the keyframe animation.
step-end: Equivalent to steps(1, jump-end), the animation jumps to the end state at the end of the keyframe animation.
<steps()>: Specifies a stepping function with the number of steps and the position of the start or end.

Initial Value

The initial value for the animation-timing-function property is ease.

Applies To

The animation-timing-function property applies to all elements, including the ::before and ::after pseudo-elements.

Inherited

The animation-timing-function property is not inherited.

Computed Value

The computed value is as specified.

Animation Type

The animation-timing-function property is not animatable.

Formal Syntax

animation-timing-function =
  <easing-function> [, <easing-function>]*

<easing-function> =
  <linear-easing-function> |
  <cubic-bezier-easing-function> |
  <step-easing-function>

<linear-easing-function> =
  linear |
  <linear()>

<cubic-bezier-easing-function> =
  ease | ease-in | ease-out | ease-in-out |
  <cubic-bezier()>

<step-easing-function> =
  step-start | step-end |
  <steps()>

<linear()> =
  linear( [<number> <percentage>]{1,2} [, <number> <percentage>]* )

<cubic-bezier()> =
  cubic-bezier( [<number [0,1]> , <number> , <number [0,1]> , <number>] )

<steps()> =
  steps( <integer> , <step-position>? )

<step-position> =
  jump-start | jump-end | jump-none | jump-both | start | end

By understanding the formal definition and syntax of the animation-timing-function property, web developers can effectively utilize this property to create smooth, dynamic, and engaging animations for their web projects.

CSS Blogs

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

CSS property CSS animation

css_property_cover/css-property-transition-timing-function.png

CSS transition-timing-function Enhance Web Animations CSS transition-timing-function controls the speed of CSS transitions. It offers predefined keywords like 'ease', 'linear', 'ease-in', 'ease-out', and custom cubic Bézier curves and step functions.

css_property_cover/css-property-animation-delay.png

CSS Animation-Delay Essential Guide for Web Design Discover how to use CSS animation-delay to enhance your web designs. Learn about its options, including time values, inherit, initial, revert, and unset.

css_property_cover/css-property-animation-play-state.png

CSS animation-play-state Control Animation Playback Learn about the CSS animation-play-state property. Control whether animations are running or paused. Available options include 'running' and 'paused'.

css_property_cover/css-property-transition-duration.png

Understanding CSS transition-duration for Web Design The css transition-duration property specifies the time a transition takes to complete. It enhances user experience with smooth animations and offers options like time in seconds/milliseconds, initial, inherit, revert, and unset.

css_property_cover/css-property-animation-duration.png

CSS Animation-Duration Enhance Your Web Designs Learn how to use CSS animation-duration to control animation timing. Options include seconds, milliseconds, inherit, initial, revert, and more.

css_property_cover/css-property-backface-visibility.png

CSS Backface-Visibility A Comprehensive Guide Learn about CSS backface-visibility, its use cases in 3D transformations, and available options like visible and hidden. Enhance your web designs with this powerful property.

View all 337 CSS blogs

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep in Touch

Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.

Contact Information

rick@tillitsdone.com+66824564755

Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.

Address

9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand

Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.

Social media

Facebook Instagram LinkedIn

Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.

We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.

DesignRush
web design companies

Goodfirms

Mastering CSS Animation-Timing-Function for Dynamic Web Design

Introduction to animation-timing-function in CSS

Specification

Description

Syntax

Explanation of Syntax

Example Usage

Linear Easing Function

Cubic-Bézier Easing Function

Step Easing Function

Comparing Easing Functions

Complex Animation with Multiple Keyframes

Formal Definition

Formal Syntax

Explanation of Syntax

<linear-easing-function>

<cubic-bezier-easing-function>

<step-easing-function>

Initial Value

Applies To

Inherited

Computed Value

Animation Type

Formal Syntax

Talk with CEO

Introduction to `animation-timing-function` in CSS

`<linear-easing-function>`

`<cubic-bezier-easing-function>`

`<step-easing-function>`