Everyone knows transition: all 0.3s ease and a basic @keyframes fade-in. But CSS has quietly grown some genuinely powerful animation features over the last few years — most of them buried in spec updates that never made it into the average tutorial. Here are ten CSS animation techniques that fly under the radar but can seriously upgrade your UI work.
Animating Gradients and Custom Properties with @property
Normally, you can’t animate a CSS gradient’s angle or color stops directly — the browser doesn’t know how to interpolate them. The @property rule fixes this by letting you register a custom property with a defined type (, , , etc.), which makes it animatable.
@property --angle {
syntax: '<angle>';
