CSS font-palette实现色彩字体transition过渡动画实例页面

CSS代码：

@font-face {
  font-family: 'Rocher';
  src: url(./RocherColorGX.woff2);
}
h4 {
  font-family: 'Rocher';
  font-size: 40px;
  transition: font-palette 1s;
}

@font-palette-values --Purples {
  font-family: Rocher;
  base-palette: 6;
}
@font-palette-values --Mint {
  font-family: Rocher;
  base-palette: 7;
}

.purples,
.purples2mint {
  font-palette: --Purples;
}
.mint,
.purples2mint:hover,
.purples2mint:active {
  font-palette: --Mint;
}

HTML代码：

<h4 class="purples">Color fonts(紫色系)</h4>
<h4 class="mint">Color fonts(薄荷色系)</h4>

<h4 class="fill">hover下面的标题</h4>

<h4 class="purples2mint">Color fonts(过渡动画)</h4>