@property

@property --unbreakable-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #decade;
}

@property --interpolatable-percentage {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

.animate-the-property {
  transition: --interpolatable-percentage 1s ease-out;

  &:hover {
    --interpolatable-percentage: 100%;
  }
}

@property --animate {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}

@keyframes use-keyframes { to {
  --animate: 100%;
}}