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;
		}
	}
}

Defining animations

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

Spring easing from Open Props

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).

Time to finish this off!

๐Ÿจ Port over the keyframes and animation custom definitions to the file.

One more thing...

๐Ÿ‘จโ€๐Ÿ’ผ 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?

No tests here. Sorry.