Keyframe Animations

👨‍💼 Final stop: the keyframe animations. Make the awesome roll-reveal and other animations work once again!

Defining keyframes

The custom keyframes are not defined via CSS variables — they're just regular CSS keyframes definitions inside the @theme:

@theme {
	@keyframes fade-in {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
}

You can extend animations in the Tailwind theme with --animate-{name} CSS variables.

In the Tailwind config, we're importing easing props from Open Props:

import easings from 'open-props/src/easing'

Those are used in the roll-reveal animation:

animation: {
 'roll-reveal': `0.4s roll-reveal ${easings['--ease-spring-2']} backwards`,
}

This JS interpolation will clearly not work in CSS. Luckily we can also import the Open Props easings from the CSS...

@import 'open-props/easings';

... and use the spring-2 easing with var(--ease-spring-2).

🐨 Port over the keyframes and animation custom definitions to the

file.

👨‍💼 When you've done everything, go ahead and delete the

👨‍💼 Yup, get rid of the whole thing. We don't need it.

🦉 That's right — no need to configure the content array or anything. Everything just works, with our CSS file as the only entry point.

🦉 How coooo-whoool is this?