No Login Data Private Local Save

@property Registration - Online Custom CSS Property Animator

Developer Tools Educational animation CSS Houdini @property
40
0
0
0

@property Registration & Animator

Register custom CSS properties and animate them seamlessly. Generate @property rules with live preview.

Configuration
Must start with --
Which CSS property the custom prop will sync with for preview.
From To
Live Preview & Code
Preview element 
/* Generated @property rule will appear here */

FAQ & Knowledge Base

The @property at-rule allows you to define custom properties (CSS variables) with syntax, inheritance, and initial value. This gives the browser more insight, enabling smooth transitions and animations on custom properties.

Standard CSS variables cannot animate because the browser doesn't know their type. With @property you declare a type (<color>, <length> etc.), making interpolation possible—just like built-in properties.

Supported in Chrome 85+, Edge 85+, Opera 71+, and Samsung Internet 14+. Firefox and Safari do not support @property yet (as of 2024). For cross-browser animation, use JavaScript-based polyfills or fallbacks.

Common types: <length>, <number>, <color>, <percentage>, <angle>, <time>, <resolution>, <transform-function>, <custom-ident>, or * for any value.

If inherits: true, the custom property will inherit its value from the parent element (like color). If false, it won't inherit and falls back to the initial value when not set.

You can animate smoothly only when the syntax type is interpolable (e.g., colors, lengths, numbers). * syntax disables interpolation. Make sure start/end values match the declared syntax.

var() reads the value; @property defines the meta-data (type, default, inheritance). Together they unlock powerful animations and type-safe styling.
🔧 Related Tools