CSS自定义属性无法在Chrome中使用

Question

我有以下CSS Custom属性设置如下：

:root {
  --login-top: 20px;
}

在CSS中，我在以下地方使用它：

@keyframes loginformstart{
    from {top:200px;}
    to  {top: var(--login-top);}
}

.login_form_hide
{
    display:block;
    position:absolute;
    top: var(--login-top);
    animation-name: loginformhide;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

这适用于Firefox，但不适用于Chrome。我做错了吗？

来源：W3C

Answer 1

根据MDN spec，Firefox是目前唯一支持css变量的浏览器。