CSS 变换动画在 Chrome 中不起作用

Question

我创建的动画通过向其添加.overlay-appear class，在0.4秒内从右向左逐渐在.overlay的class元素中滑动点击。它在 Mozilla 中完美运行。在 Chrome 中，不会发生滑动效果，当我单击该特定按钮时，元素只会出现。我将供应商前缀添加到 keyframes、animation 和 transform，但问题仍然存在。也许我遗漏了什么？

这是与问题相关的CSS：

.overlay {
    position: fixed;
    background-color: rgb(49, 49, 49);
    z-index: 100;
    top: 0;
    right: 0;
    width: 0%;
    height: calc(100vh - 25px);
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 25px 50px 0 0;
}

.overlay-appear {
    animation: appear .4s forwards;
    -webkit-animation: appear .4s forwards;
    width: 50%;
    display: flex;
    transform-origin: right;
    -webkit-transform-origin: right;
}

@keyframes appear {
    0% {
        transform: scaleX(0%);
    }
    100% {
        transform: scaleX(100%);
    }
}

@-webkit-keyframes appear {
    0% {
        -webkit-transform: scaleX(0%);
    }
    100% {
        -webkit-transform: scaleX(100%)
    }
}

Answer 1

您忽略了 transfrom:scale(); 只接受简单整数（不是任何类型的度量）这一事实。我不知道为什么 Firefox CSS 引擎会接受它。但要使代码合法，请更改值。

@keyframes appear {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

scaleX(1) 表示 div 的实际大小，如其代码所指定。此处的任何其他度量均表示相对比例（而不是任何绝对度量）。

CSS 变换动画在 Chrome 中不起作用

CSS transform animation doesn't work in Chrome

css

google-chrome

css-transforms