I noticed that in common shader
programs, animation is based on the
time uniform value.
Other values which are going to animate will be calculated according to it and keep updating as
So there's animation.
That's quite different from keyframe based animation in CSS. As someone who has used CSS for animation for years, it feels very novel to me since it requires a kind of different thinking model.
Here's my experiment of adding
time uniform to CSS.
Pure CSS solution
You may think of using
dynamically update the time variable and pass it to CSS via custom property.
But there's another interesting way in pure CSS.
Why don't use
<Integer> here? Because its maximum length is 6 digits,
999999 it becomes
0 and sticks to it.
The next step is to increase the value of variable
--t using animation.
The animation needs to be running as long as possible in order to simulate the never-ending time ticks.
Nobody will likely to run the animation for a year so it's fairly safe to set the animation duration to be a year.
31536000000 in ms.
--t will increase by
1000 linearly in one second.
It's enough to make the transitions smooth.
Here is how to animate an element without writing keyframes. Pretty simple, huh?
If you want to rotate the element by
10s, calculate it manually.
Colors can be animated by changing hue in
The operations of CSS
calc() function is quite limited support.
There isn't any way to do modulo calculation,
which is quite useful, since the value of
--t changes in one direction.
There also lacks the periodic functions like
I've been waiting for too long since I first heard the news below.
The CSS Working Group agreed this morning on adding many math functions. We now have:— Benjamin De Cock (@bdc) February 28, 2019
The face of CSS is rapidly changing.
Currently the time uniform is OK for simple rotation and color animations. Hope browsers support native Math functions in CSS soon.
Add to css-doodle
It may not be quite useful at the moment, but I'm sure it's something for the future.
Links to demos
Google Chrome is required to view animations in this article at the time of writing.