First Things First – What is @property?
Alright, before we jump into code, let me explain what’s happening. You’ve probably used CSS variables before, right? Stuff like:
:root {
--primary-color: #ff00ff;
}
Cool. But here’s the thing—those variables weren’t designed to animate. If you ever tried animating a CSS variable (like a color or an angle), you might’ve noticed… nothing happens.
That’s where @property steps in. It basically tells the browser how to understand your custom variable—what type it is, whether it can be inherited, and what its default value should be. Once the browser knows that, you can animate it just like any other CSS property.
Follow the Browser Support (Don’t Skip This!)
Before you dive in, let me save you some debugging time.
Since July 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
- ✅ Chrome 85+
- ✅ Edge 85+
- ✅ Safari 16.4+
- ✅ Firefox
So if you’re testing in old browser and scratching your head—don’t panic, it’s not your code.
My advice: Develop with progressive enhancement in mind. Let modern browsers show the magic, and make sure the experience doesn’t break in others.
Let’s Get to the Fun Part – Making It Work
I’ll walk you through a real example: animating a rotation using a custom property.
Step 1: Declare the Custom Property with @property
Here, we’re telling the browser: “Hey, I’m going to use a CSS variable called --rotation. It’s an angle, not just some text.”
@property --rotation {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
Simple, right?
Step 2: Use It in Your CSS
Now, let’s apply it to an element. I’ll use a box for the demo:
.box {
width: 100px;
height: 100px;
background: #00d4ff;
--rotation: 0deg;
transform: rotate(var(--rotation));
transition: --rotation 1s ease-in-out;
}
This tells the box to rotate using our custom property—and makes it animatable!
Step 3: Animate It (on Hover, for Example)
Here comes the magic. Just change the value of --rotation on hover:
.box:hover {
--rotation: 360deg;
}
Boom. The box spins smoothly.
Try It Yourself – Live Demo
Go ahead and hover over this box:
If your browser supports it, you’ll see that silky-smooth spin!
Some Cool Things You Can Try Next
Now that you know how this works, here are a few fun directions to take it:
- Animate colors with
syntax: "<color>" - Animate spacing with
syntax: "<length>" - Build themed UI transitions—dark mode fades, hover glow effects, etc.
- Combine with JavaScript to dynamically update the variables on scroll or click.
Resources I Recommend
Let’s Wrap It Up
So now you’ve got a new tool in your CSS toolkit—the ability to animate variables like a pro. @property isn’t just for nerdy edge cases; it’s a creative superpower. And when you combine it with the rest of modern CSS?
