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进行宽度和高度调整。

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

CSS-KeyFrame无效的属性值

1 个答案: