Written by Emmanuel Odioko

For a long time, the limited support for math functions made creating time-based CSS animations much more challenging. A traditional animation relied on keyframes and durations lacking the flexibility of time-based updates based on complex calculations. With the introduction of CSS functions like mod(), round(), and trigonometric functions, developers can now explore how to master time-based animations in CSS.

Things to know before you begin
To get the most out of this piece about time-based animations in CSS using new CSS functions, you should have a good understanding of CSS animations and transitions. You should be able to know how to create animations using @keyframes and control their timing. You should also have a basic understanding of JavaScript focusing more on the ability to manipulate DOM elements and respond to user events.

Lastly, an understanding of new CSS functions like calc(), and a readiness to explore emerging features like mod(), trigonometric functions including sin() and cos(), and round() would make a good foundation.

By the time you are done reading this article, you will understand how animations were traditionally implemented on an HTML canvas using JavaScript and how they compare to the newer CSS functions. We will understand the ease of using mod(),round(), and trigonometric functions over traditional CSS keyframes.

What are CSS time-based animations?

Time-based animations are not new — they’ve been around for over a decade. Some are complicated to use, while others are not. You know those CSS files where mathematical calculations are primary? Time-based animations are part of those.

As the name implies, these animations are closely related to time, in that the properties of elements, such as position, size, color, opacity, etc., change over time. CSS time-based animation produces smooth transitions enhancing the feel of web applications and providing a better user experience.

Time-based CSS animations primarily consist of a defined start and end timeline and interpolation points. Interpolation here refers to the calculation of intermediate values between the start and end of the animation over a given duration as the animation progresses. The reason for interpolation is to provide a smooth transition from the initial to the final state.

Time-based animations happen with the combination of both CSS variables and a few mathematical functions. This unity enables developers to create animations that change over time and results in more flexible animations that keyframe animations can only dream of. Let's break down the key concepts and how they work.

Breaking down time-based animations

In this section, we will break down the general structure for creating time-based animations into key components.

Initial state
The initial state defines the element’s starting properties before the animation begins. This could be a specified position, size, color, opacity, etc. Example below:

In the code above, we have the initial state for an element with the class box which defines its opacity and transform properties.