0

It's possible to apply transition / animation to a CSS variable itself? instead of the CSS property? Something like:

.home {
  --foo: red;
  background: var(--foo);
  transition: --foo 200ms linear;
}

.home:hover {
  --foo: blue;
}
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Maxwell s.c
  • 1,583
  • 15
  • 29
  • Not like that. The variable would have to be the *property* not the value... – Paulie_D Sep 22 '21 at 15:26
  • It's really not clear what you are expecting to gain here. – Paulie_D Sep 22 '21 at 15:28
  • Yes, but it should be `transition: var(--foo) 200ms linear;` . – G-Cyrillus Sep 22 '21 at 15:30
  • @G-Cyrillus Even that won't work since the variable is a value not a property. – Paulie_D Sep 22 '21 at 15:31
  • @G-Cyrillus this is same that ```transition: red 200ms linear``` this makes no sense – naxsi Sep 22 '21 at 15:31
  • oups, you'r right , i only looked at the syntax @Paulie_D – G-Cyrillus Sep 22 '21 at 15:31
  • I believe you may be after `transition: background 200ms linear`? – The Otterlord Sep 22 '21 at 15:33
  • it's possible but only Chromium browser support this for now. Check the duplicate – Temani Afif Sep 22 '21 at 15:33
  • @Paulie_D --foo is already a property. It's a *custom* property – Temani Afif Sep 22 '21 at 15:34
  • But you can't use it like that. In the transition it's a value and you can't transition `red` – Paulie_D Sep 22 '21 at 15:36
  • If `--foo` was `background` it might be different, – Paulie_D Sep 22 '21 at 15:37
  • @Paulie_D you can: https://jsfiddle.net/bh7k6a30/2/ .. the only issue is that the browser won't recognize the type since a custom property is handled as a string by default so its transition will behave like display but if you register the property with a type it will have a transition. We are not transition the value red but the property --foo between two values – Temani Afif Sep 22 '21 at 15:40
  • thanks, really it cannot animate/transition because the browser do not know what is the type of the value to animate. It seems that there is a feature (currently only work on chromium) that allows me to declare an property, allowing me to animate it. – Maxwell s.c Oct 07 '21 at 19:17

0 Answers0