CSS自定义属性继承与默认值使用

当我们为一个元素分配动画时，我们可以自定义它的一些属性，比如duration持续时间、delay延迟等等。假设我们有两个类：walk和run。两者共用相同的动画（命名为breath），run执行该动画的速度比walk快（分别为0.5s到2s）。

@keyframes breath {
  from {
    transform: scale(0.5);
  }
  to {
    transform: scale(1.5);
  }
}

.walk {
  animation: breath 2s alternate;
}

.run {
  animation: breath 0.5s alternate;
}

每次重用breath动画时，我们希望动画内的行为基于我们为其分配的属性不同而有所不同。常见方法是复制原始动画并直接在类中调整值：

@keyframes breath {
  from {
    transform: scale(0.5);
  }
  to {
    transform: scale(1.5);
  }
}

@keyframes breathDeep {
  from {
    transform: scale(0.3);
  }
  to {
    transform: scale(1.7);
  }
}

.walk {
  animation: breathDeep 2s alternate;
}

.run {
  animation: breath 0.5s alternate;
}

虽然效果很好，但是有一个更好的解决方案就是通过CSS变量继承来重用动画的属性及其值：

@keyframes breath {
  from {
    transform: scale(var(--scaleStart));
  }
  to {
    transform: scale(var(--scaleEnd));
  }
}

.walk {
  --scaleStart: 0.3;
  --scaleEnd: 1.7;
  animation: breath 2s alternate;
}

.run {
  --scaleStart: 0.8;
  --scaleEnd: 1.2;
  animation: breath 0.5s alternate;
}

现在，我们无需编写重复的动画代码即可从同一动画中获得不同的效果！

当然我们还可以设置默认值，这些默认关键值将被元素自己的自定义属性覆盖。

transform: scale(var(--scaleStart, 0.5));

我们也可以使用JavaScript更新CSS自定义属性。

:root {
   --view-height: 0;
}
div {
   height: calc(var(--view-height) - 10px);
}

const vh = document.documentElement.clientHeight;
document.documentElement.style.setProperty('--view-height', vh+'px');