CSS by EezyTutorials

CSS - @property

Print this lesson
Back to top ↑

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 10–12 minutes

Register custom properties to animate them smoothly and provide type hints.

Learning Objectives

  • Register @property with syntax and initial values.
  • Animate custom properties safely.

Details & Examples

@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.spinner{ --angle: 0deg; transform: rotate(var(--angle)); transition: --angle .6s ease; }
.spinner:hover{ --angle: 90deg; }

Checks for Understanding

  1. Why define syntax for a custom property?
Show answers
  1. It enables interpolation/animation and authoring-time validation.

Exercises

  1. Register a --angle property and animate a rotation on hover.
  2. Define a typed color property and transition between two colors.
Suggested answers
  1. See example above with @property --angle and transition.
  2. @property --brand { syntax:'<color>'; initial-value:#22c55e; inherits:false }
« Prev: CSS - Functions & Math Next: CSS - Transforms (2D/3D) »