CSS 自定义属性在 Chrome 中不起作用

Question

我有以下 CSS 自定义属性设置如下:

: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变量的浏览器。