CSS Houdini
CSS Houdini is a collection of browser APIs that expose parts of the CSS engine’s internals, allowing developers to extend CSS’s capabilities. This enables developers to create custom CSS properties, layouts, paint effects, animations, and more — features that would otherwise require waiting for native browser support or using complex hacks.
Houdini’s goal is to make CSS more extensible, letting developers “write” new CSS features much like browser vendors do. It includes several main APIs:
- Properties and Values API (custom properties and values)
- Paint API (custom painting)
- Layout API (custom layout)
- Animation Worklet (custom animations)
- Typed OM (Typed Object Model)
Animation effects implemented with @property
The purpose of @property is to tell the browser the type, initial value, and whether a CSS custom property (CSS variable) is inheritable, so the browser can perform interpolation on it. In other words, it turns a --var that previously could only jump (no transition) into a value that can smoothly transition / animate.
Simply put: as long as the value can be expressed in CSS as an interpolable type (angle, number, length, color, percentage, etc.) and is used on animatable properties, you can achieve “pure CSS” animation effects.
@property belongs to the CSS Properties and Values API (commonly grouped under the “Houdini” umbrella)@property; for certain browsers please check the latest compatibility table.syntax: "<color>"
Declare a custom color property using @property, then smoothly change one color in a linear-gradient background via a CSS animation.
syntax: "<angle>"
Declare a custom angle property using @property, then smoothly animate the direction angle of a linear-gradient background (for example, from 0deg to 360deg).
CSS animation delay
Achieve complex animation effects with animation pause state and control animation delay.
JavaScript
JavaScript is a programming language that adds interactivity to websites. You can use it to control just about anything — form data validation, button functionality, game logic, dynamic styling, animation updates, and much more. This article gets you started with JavaScript and walks you through adding some fun features to your first website.