CSS- KeyFrame 无效的属性值

Question

不确定我在这里面对的是什么，但我正在尝试应用 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 的问题吗？

Answer 1

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

工作 fiddle :https://jsfiddle.net/5xjmkq4f/