在Web中制作动效姿势有很多种，比如说纯CSS制作动效，JavaScript制作动效等。但话又说回来，如果你使用CSS来制作动效的时候会有不少的限制，虽然说CSS自定义属性的到来给CSS制作动效带来不少的变化，但还是有一定的缺陷在这里面。不过，CSS Houdini的到来，不说其自身的Animation API，就说他的自定义属性的出现，就可以帮助我们弥补CSS开发动效带来的缺陷和限制。换句话说，CSS Houdini的自定义属性 @property 可以扩展CSS的动效，也可以帮助我们提高CSS开发动效的能力。这篇文章，主要就是和大家一起来探讨，CSS Houdini的自定义属性是如何扩展动效开发的能力。

回顾CSS中的自定义属性

在开始正题之前，先花一点点时间和大家回顾一下CSS自定义属性相关的知识，这对于没有接触过CSS自定义属性以及CSS Houdini的自定义属性的同学会有所帮助。

CSS自定义属性已有多年的发展史了，到今天为止也得到所有主流浏览器的支持，并且在一些项目中得到运用。CSS自定义属性的注册和引用非常的简单：

/* 使用 -- 前缀注册了一个全局的CSS自定义属性 */
:root {
    --color: #09f;
}

/* 使用 var()函数引用了已注册的自定义属性 --color */
a {
    color: var(--color)
}

/* 在链接悬浮状态重新注册（修改了）自定义属性 --color的值 */
a:hover {
    --color: #f36;
}

CSS自定义属性的出现能够帮助我们更好的管理复杂样式中的值，并且提高代码的可读性，可维护性。

要是你从未接触过CSS自定义属性相关的知识，那么你真的有必要花一些时间阅读下面这几篇文章，这样有助于你更好的了解CSS自定义属性，并且很好的在项目中使用它，如此一来可以体会到CSS自定义属性给开发者带来的好处：

• 图解CSS：CSS自定义属性
• CSS自定义属性你知道多少
• CSS自定义属性你知多少
• CSS自定义属性使用指南
• 你应该掌握的CSS自定义属性技术点
• 是时候开始使用CSS自定义属性
• CSS自定义属性的使用实例
• 在CSS自定义属性中有效使用无效变量

而且CSS自定义属性的出现，可以帮助我们更好的制作Web动效，比如下面这个示例：

阅读上面示例代码，你会发现，借助CSS自定义属性特性，并且结合setProperty这个API可以让我们非常容易的实现上面示例中展示的动画效果。但这并不代表CSS自定义属性实现Web动效就是万能的。但这并不是万能的，因为我们在 @keyframes 中使用CSS自定义属性就无法稳定地实现动画效果。比如：

.box {
    width: 50px;
    height: 50px;
    --offset: 0;
    border-radius: 5px;
    background-color: #09f;

    transform: translateX(var(--offset));
    animation: moveBox 2s linear infinite;
}

@keyframes moveBox {
    0% {
        --offset: 0;
    }
    50% {
        --offset: 300px;
    }
    100% {
        --offset: 600px;
    }
}

虽然蓝色盒子在移动，但并没有过渡的效果：

运行示例会发现动画效果非常的生硬：

出现这种效果是不是不可思议的，其实在CSS自定义属性的规范中针对这种现象做过相应的描述：

Notably, they can even be transitioned or animated，since the UA has no way to interpret their contents, they always use the “flips at 50%” behavior that is used for any other pair of values that can’t be intelligently interpolated.

大致意思是说：“ 尤其是，它们（自定义属性）甚至可以被过渡或动画化，但因为用户代理无法解释这些内容，它们永远采用为所有它们不能智能补值的值所采用的‘抛硬币’行为。 ”

不过CSS Houdini的 @property 出现之后，可以帮助我们达成这一目标，它允许 我们明确的定义这些CSS自定义属性，例如为其提供值类型，初始值，以及定义这些值是否应该继承 @property。简单地说，我们使用@property注册的自定义属性，可以轻易帮助我们让上面示例动效变得顺滑流畅：

@property --offset {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 0px;
}

.box {
    --offset: 0;
    transform: translateX(var(--offset));
    animation: moveBox 2s linear infinite;
}

@keyframes moveBox {
    0% {
        --offset: 0;
    }
    50% {
        --offset: 300px;
    }
    100% {
        --offset: 600px;
    }
}

运行上面的示例，看到的动画效果要原生CSS自定义属性实现的效果要流畅：

正如上面示例所示，@property注册CSS自定义属性很简单：

@property --property-name {
    syntax: '<length-percentage>';
    initial-value: '0px';
    inherits: false;
}

另外，除了使用@property注册CSS自定义属性之外，还可以在JavaScript中使用CSS.registerProperty注册自定义属性：

CSS.registerProperty({
    name: '--property-name',
    syntax: '<length-percentage>',
    inherits: false,
    initialValue: 0
})

CSS Houdini的自定义属性和原生CSS自定义属性相比，最大的差异就是多了 值类型检测、 初始值设置 和 是否