Animating Registered Custom Properties by Syntax Types

All the syntax types of custom properties being animated.

by Travis Almand

HTML

<p>Hover over each to see the transition of each syntax type in the registered CSS custom property.</p>

<div class="container length">length</div>
<div class="container percentage">percentage</div>
<div class="container length-percentage">length-percentage</div>
<div class="container color">color</div>
<div class="container integer">integer</div>
<div class="container angle">angle</div>

<p>Number doesn't seem to work in transitions for some reason.</p>
<div class="container number">number</div>

SCSS

.container {
  border: 3px solid red;
  height: 50px;
  margin: 20px;
  transition-duration: 1s;
  width: 200px;
}

.length {
  --length: 200px;
  transition-property: --length;
  width: var(--length);
  
  &:hover {
    --length: 300px;
  }
}

.number {
  --number: 200;
  counter-reset: number var(--number);
  transition-property: --number;
  
  &:hover {
    --number: 300;
  }
  &::after {
    content: counter(number);
    display: block;
  }
}

.percentage {
  --percentage: 25%;
  transition-property: --percentage;
  width: var(--percentage);
  
  &:hover {
    --percentage: 50%;
  }
}

.length-percentage {
  --length-percentage: 25%;
  transition-property: --length-percentage;
  width: var(--length-percentage);
  
  &:hover {
    --length-percentage: 50%;
  }
}

.color {
  --color: red;
  background-color: var(--color);
  transition-property: --color;
  
  &:hover {
    --color: blue;
  }
}

.integer {
  --integer: 0;
  counter-reset: integer var(--integer);
  transition-property: --integer;
  
  &:hover {
    --integer: 300;
  }
  &::after {
    content: counter(integer);
    display: block;
  }
}

.angle {
  --angle: 0deg;
  transform: rotate3d(0, 0, 1, var(--angle));
  transition-property: --angle;
  
  &:hover {
    --angle: 45deg;
  }
}

JavaScript

CSS.registerProperty({
	name: '--length',
  syntax: '<length>',
  inherits: false,
  initialValue: '0px'
});
CSS.registerProperty({
	name: '--number',
  syntax: '<number>',
  inherits: false,
  initialValue: '0'
});
CSS.registerProperty({
	name: '--percentage',
  syntax: '<percentage>',
  inherits: false,
  initialValue: '0%'
});
CSS.registerProperty({
	name: '--length-percentage',
  syntax: '<length-percentage>',
  inherits: false,
  initialValue: '0px'
});
CSS.registerProperty({
	name: '--color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'rebeccapurple'
});
CSS.registerProperty({
	name: '--integer',
  syntax: '<integer>',
  inherits: false,
  initialValue: '0'
});
CSS.registerProperty({
	name: '--angle',
  syntax: '<angle>',
  inherits: false,
  initialValue: '0deg'
});
CSS.registerProperty({
	name: '--time',
  syntax: '<time>',
  inherits: false,
  initialValue: '0s'
});