Get the latest tech news

Time-Based CSS Animations

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.

So I've added the@t function for representing variable--t. The latest version of css-doodle also accepts simple Math expressions directly inside arguments. @grid: 20x1 / 280px 60px; @gap: 1px; @size: 100% 20%; background: #000; margin: auto; translate: 0 calc(20px * sin(4*@t(/20, +@i(*6), %360deg))); Start / Stop @grid: 20x1 / 280px 60px; @gap: 1px; @size: 100% 20%; background: #000; margin: auto; translate: 0 calc(20px * sin(3*@t(/50, *@i(*2), %360deg))); Start / Stop

Get the Android app