CSS- KeyFrame 无效的属性值答案

【问题标题】：CSS- KeyFrame invalid property valueCSS- KeyFrame 无效的属性值
【发布时间】：2018-04-10 17:34:26
【问题描述】：

不确定我在这里面临什么，但我正在尝试应用 CSS 动画。

在做了一些研究之后，我认为添加 webkit 前缀将有助于解决问题，但看起来我仍然面临读取无效属性值的问题。

这是我当前的代码：

.progress-status.complete {
    width: 0%;
    -webkit-animation: slideAll 2s ease-in-out infinite;
    animation: slideAll 9s ease-in-out infinite;
}

@-webkit-keyframes slideAll {
    from {
        width: 0%;
    }

    to {
        width: 100%
    }
}

@keyframes slideAll {
    from {
        width: 0%;
    }

    to {
        width: 100%
    }
}

我是通过 Webpack 编译的，这可能是 css-loader 的问题吗？

【问题讨论】：

我试过你的例子，效果很好。要验证您的 HTML 和 CSS 是否按预期插入，请使用开发人员工具打开网页并导航到 .progress-status.complete 元素。要验证的事情：您的页面是否包含所需的元素，样式是否正确插入，样式是否正确应用于您的元素。如果您也将它用于样式，那么它很可能是 webpack 捆绑的问题。你使用样式加载器吗？

标签： css css-animations webpack-2 webpack-style-loader

【解决方案1】：

我不认为这是webkit 的事情，除非您使用的是旧版浏览器。可能听起来很傻，但你确定，你是在 CSS 中的某个地方为那个元素添加背景和高度吗？另一件事，避免动画元素的宽度和高度，它会导致布局重排，从而减慢页面速度。相反，请使用scaleX 或scaleY 进行宽度和高度调整。

工作小提琴：https://jsfiddle.net/5xjmkq4f/

【讨论】：