Post

Don't forget to cancel your 4am alarm before you go to bed!

Evan Minto

@evanminto.com

codepen.ioShopTalk Example - Transitioning Custom Properties...

@chriscoyier.net @davatron5000.bsky.social The custom property animation problem you were trying to figure out is that you can’t animate or transition the _property itself_. You can use custom properties in animatable properties though. Example: codepen.io/vamptvo/pen/...

Dave Rupert

@davatron5000.bsky.social

Awesome. I just need to update by brain database: Custom properties without \@property are non-animatable/transitionable. But other properties that use the custom properties are.

Evan Minto

@evanminto.com

Yep. The most common issue here is that while background colors can animate, gradients can't, so you have to animate custom props and pipe them into the gradient. But of course, doing so requires \@property!

Custom properties do animate by default, but they animate _discretely_ (as in: they flip over midway the animation). By registering a custom property to be of a certain type (through @property), the browser knows how to interpolate its values when used in transitions and animations.

Evan Minto

@evanminto.com

Ah thank you, my bad. In most cases that feels like it doesn't animate, but it technically does!

Yeah, it's a technical detail that you mostly don't even notice because the animations go so fast.

css-tricks.comExploring @property and its Animating Powers | CSS-TricksUh, what’s @property? It’s a new CSS feature! It gives you superpowers. No joke, there is stuff that @property can do that unlocks things in CSS we’ve never

This post by @jhey.dev from 2021 has all the details (and demos) you need: css-tricks.com/exploring-pr...