Time-based CSS Animations

submited by

Style Pass

2024-05-05 04:30:01

In my earlier post Time Uniform For CSS Animation, I took a note about a way to do CSS animations with time ticks instead of keyframes. It was limited applicable because CSS lacked the ability of doing complex Math calculations.

After years of wait, CSS now has enough Math functions supported, particularly mod(), round(), and trigonometric functions. It's time to revisit the time-based way of animation, hope it'll be more useful this time.

Using time for animation is very common in shader programs and various other places. CSS can not start a timer like JavaScript does, but nowadays it's possible to define a custom variable with the CSS Houdini API to track time in milliseconds.

For each millisecond, the variable --t increments by 1, which is 1000 in one second. There's a trick to show the variable with counter() function.

Maintaining the update frequencey at 60 frames per second (FPS) is sufficient for a smooths animation. Browsers often have optimizations for rendering so there wouldn't be any problem if the frequencey is higher than 60. But one can manually control the frame rate using step() function if needed.