The Cascade is a blog about the past, present, and future of CSS.

Howdy—Robin Rendle here.

This blog keeps me in the loop with everything that’s possible with CSS lately but it’s also a reminder to celebrate the people doing the hard work building stuff for the web.

You can subscribe to The Cascade via RSS, shoot me an email if you absolutely must, or follow the feed. This project is directly supported by readers and the membership program.

Right now the newsletter is taking a bit of a break whilst I figure out a healthy publishing cadence, but you can subscribe below:

Tagged with math functions

Time-based CSS animations

This post by Chuan about time-based CSS animations has a ton of bonkers CSS tricks that are worth checking out:

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.

Chuan uses these functions to set up a custom variable via the CSS Houdini API and then track the time in milliseconds. So beware, this is pretty wild stuff:

@property --t {
	syntax: "<integer>";
	initial-value: 0;
	inherits: true;
}

@keyframes tick {
	from {
		--t: 0;
	}
	to {
		--t: 86400000;
	}
}

:root {
	animation: tick 86400000ms linear infinite;
}

Chaun also works on css-doodle which is a web component for drawing cool and elaborate patterns. All of this stuff is very much worth checking out!