JSFiddle - React, Tailwind, and code Playground

css variable transition experiment with Paint API

by Travis Almand

HTML

<div class="container"></div>
<div class="container"></div>

CSS

.container {
  --custom: 1;
  background-image: paint(custom);
  border: 3px solid red;
  height: 100px;
  margin: 20px;
  transition: --custom 0.5s;
  width: 100px;
}
.container:hover {
  background-image: paint(custom);
  border-color: blue;
  --custom: 10;
}

JavaScript

CSS.registerProperty({
  name: '--custom',
  syntax: '<number>',
  inherits: false,
  initialValue: 10
});

CSS.paintWorklet.addModule(URL.createObjectURL(new Blob([`
  class CustomPaint {
  static get inputProperties() { return ['--custom']; }
   
  paint(ctx, geom, properties) {
  	const custom = parseInt(properties.get('--custom'));
    
    console.log(custom);
  }
}

// Register our class under a specific name
registerPaint('custom', CustomPaint);
`], {type: "application/javascript"})));