还是利用上述的可变字体，我们利用 font-variation-settings 实现一个字体粗细的变化的动画：
<p>Anybody</p> @font-face { font-family: 'Anybody'; src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/ETCAnybodyPB.woff2') format('woff2-variations'); font-display: block; font-style: normal italic; font-weight: 100 900; font-stretch: 10% 400%; } p { font-family: 'Anybody'; font-size: 48px; animation: fontWeightChange 2s infinite alternate linear; } @keyframes fontWeightChange { 0% { font-variation-settings: 'wght' 100; } 100% { font-variation-settings: "wght" 600; } }效果如下：
其中，其实可以理解为，利用了 font-variation-settings: "wght" 的变化的动画，等同于 font-weight 变化动画：
OK，那么如果既然是一样的效果，为什么还要多此一举搞个 font-variation-settings 呢？
那是因为 font-variation-settings 除了支持字体的粗细变化外，还支持上述说的注册轴设定的多个样式属性变化，以及自定义轴的一些字体样式属性变化。
这次，除了字体粗细外，我们再添加上 "wdth" 的变化，也就是字体的伸缩。
<p>Anybody</p> @font-face { font-family: 'Anybody'; src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/ETCAnybodyPB.woff2') format('woff2-variations'); font-display: block; font-style: normal italic; font-weight: 100 900; font-stretch: 10% 400%; } p { font-family: 'Anybody'; font-size: 48px; animation: fontWeightChange 2s infinite alternate linear; } @keyframes fontWeightChange { 0% { font-variation-settings: 'wght' 100, 'wdth' 60; } 100% { font-variation-settings: "wght" 600, 'wdth' 400; } }这次，进行的是字体粗细从 100 到 600，字体伸缩从 60% 到 400% 的动画效果，效果如下：
也就是说，font-variation-settings 是同时支持多个字体样式一起变化的，这一点非常重要。
到这里，其实我们已经可以利用这个实现题图所示的效果了，我们简单改造下，添加多行，再给每行设定一个负的动画延迟即可：
<div> <ul> <li>ANYBODY</li> <li>ANYBODY</li> <li>ANYBODY</li> <li>ANYBODY</li> <li>ANYBODY</li> <li>ANYBODY</li> <li>ANYBODY</li> <li>ANYBODY</li> </ul> </div>借助 SCSS 简化下代码，下述代码核心就是给每个 li，添加一个相同的动画 font-variation-settings 动画，并且依次设置了等差的 animation-delay：
li { animation: change 0.8s infinite linear alternate; } @for $i from 1 to 9 { li:nth-child(#{$i}) { animation-delay: #{($i - 1) * -0.125}s; } } @keyframes change { 0% { font-variation-settings: 'wdth' 60, 'wght' 100; opacity: .5; } 100% { font-variation-settings: 'wdth' 400, 'wght' 900; opacity: 1; } }效果如下：
好，接下来，利用 CSS 3D 简单构造一下 3D 场景即可，完整的 CSS 代码如下：
@font-face { font-family: 'Anybody'; src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/ETCAnybodyPB.woff2') format('woff2-variations'); font-display: block; font-style: normal italic; font-weight: 100 900; font-stretch: 10% 400%; } .g-container { position: relative; margin: auto; display: flex; font-size: 48px; font-family: 'Anybody'; color: #fff; transform-style: preserve-3d; perspective: 200px; } ul { background: radial-gradient(farthest-side at 110px 0px, rgba(255, 255, 255, 0.2) 0%, #171717 100%); padding: 5px; transform-style: preserve-3d; transform: translateZ(-60px) rotateX(30deg) translateY(-30px); animation: move 3s infinite alternate; &::before { content: ""; position: absolute; left: 0; bottom: 0; right: 0; height: 45px; background: #141313; transform: rotateX(-230deg); transform-origin: 50% 100%; } } li { width: 410px; animation: change 0.8s infinite linear alternate; } @for $i from 1 to 9 { li:nth-child(#{$i}) { animation-delay: #{($i - 1) * -0.125}s; } } @keyframes change { 0% { font-variation-settings: 'wdth' 60, 'wght' 100; opacity: .5; } 100% { font-variation-settings: 'wdth' 400, 'wght' 900; opacity: 1; } } @keyframes move { 100% { transform: translateZ(-60px) rotateX(30deg) translateY(0px); } }效果如下，我们就基本还原了题图的效果：
完整的代码及 DEMO 效果你可以戳这里：CodePen Demo -- Pure CSS Variable Font Wave
font-variation 的可变轴 -- 注册轴与自定义轴回归到可变字体本身。上面提到了可变轴这个概念，它们分为注册轴与自定义轴，英文是：
注册轴 - registered axes
自定义轴 - custom axes
可变字体新格式的核心是可变轴的概念，其描述了字体设计中某一特性的允许变化范围。