Some useful CSS properties found when using framer

When using framer, a new feature of CSS, CSS @property, its appearance has greatly enhanced the capabilities of CSS! Since July 2024, this feature has been supported by all major browsers.

Syntax

According to MDN - @property CSS at-rule is part of the CSS Houdini umbrella of APIs. It allows developers to explicitly define their CSS custom properties, allowing for property type checking and constraining, setting default values, and defining whether a custom property can inherit values or not.

Normally, we define and use a CSS custom property like this:

css
:root {
  --whiteColor: #c0ffee;
}
div {
  color: (--whiteColor);
}

With the @property rule, we can also define a CSS custom property like the following code:

css
@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
div {
  color: var(--property-name);
}

Also very simple to use the definition in JavaScript:

javascript
window.CSS.registerProperty({
  name: "--item-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "aqua",
});

Usage

Gradient Animation

look at an example where we have a gradient pattern like below, and we add a transition effect:

css
:root {
  --colorA: #fff;
  --colorB: #000;
}
.hover-effect {
  background: linear-gradient(90deg, var(--colorA), var(--colorB));
  transition: 1s background;
  
  &:hover {
    --colorA: red;
    --colorB: blue;
  }
}

Although we set a 1s transition animation, the animation is not smooth.Let’s use CSS @property to transform.

css
@property --property-colorA {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}
@property --property-colorB {
  syntax: '<color>';
  inherits: false;
  initial-value: #000;
}
.property-hover-effect {
  background: linear-gradient(90deg, var(--property-colorA), var(--property-colorB));
  transition: 1s --property-colorA, 1s --property-colorB;
  
  &:hover {
    --property-colorA: red;
    --property-colorB: blue;
  }
}

This time We use @property syntax to define two CSS @property custom variables --property-colorA and --property-colorB , and change these two colors when hover changes. What needs to be paid attention to is the transition statement we set, transition: 1s --property-colorA, 1s --property-colorB. Here, we set the transition for CSS @property custom variables instead of setting the transition animation for the background.

Let us build a background color gradients transition animation use @property!

css
@property --property-colorC {
  syntax: '<color>';
  inherits: false;
  initial-value: #be123c;
}
@property --property-colorD {
  syntax: '<color>';
  inherits: false;
  initial-value: #eab308;
}
@property --property-colorE {
  syntax: '<color>';
  inherits: false;
  initial-value: #ef4444;
}
.property-loop-effect {
  background: linear-gradient(135deg,
      var(--property-colorC),
      var(--property-colorD),
      var(--property-colorE));
  animation: property-loop 10s infinite linear;
}
@keyframes property-loop {
  20% {
    --property-colorC: #f97316;
    --property-colorD: #6d28d9;
    --property-colorE: #be123c;
  }
  40% {
    --property-colorC: #ef4444;
    --property-colorD: #b91c1c;
    --property-colorE: #1e3a8a;
  }
  60% {
    --property-colorC: #eab308;  
    --property-colorD: #84cc16;
    --property-colorE: #1d4ed8;
  }
  80% {
    --property-colorC: #7dd3fc;
    --property-colorD: #2dd4bf;
    --property-colorE: #fbbf24;
  }
}

conic gradient

We can also use @property to create a conic gradient animation effect like below:

css
@property --per {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 25%;
}
.conic-gradient-effect {
  border-radius: 50%;
  background: conic-gradient(#a3e635, #fb923c var(--per), transparent var(--per), transparent 100%);
  transition: --per 300ms linear;
  
  &:hover {
    --per: 75%;
  }
}

There is more to explore about @property and CSS Houdini, you can find more information on MDN.