CSS- KeyFrame invalid property value

Question

Not sure what I am facing here, but I am trying to apply CSS animation.

After doing some reseach, I thought adding webkit prefix will help the solution, but it looks like I am still facing issue where it is reading invalid property value.

Here's my current code:

.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%
    }
}

I am compiling this via Webpack, so could that possibly the issue with css-loader?

I tried your example and it worked just fine. To verify that your HTML & CSS is inserted as expected, open the webpage using developer tools and navigate to the *.progress-status.complete* element. Things to verify: that your page contains the desired element, that the styles are properly inserted, that the styles are applied correctly to your element. It could very well be an issue with webpack bundling if you use it for styles as well. Do you use a style-loader? — guitarino, Oct 29 '17 at 18:10

score 1 · Answer 1 · answered Oct 29 '17 at 18:43

I don't think that's a webkit thing unless you're working with an older browser. Might sound silly but are you sure, you're adding background and height to that element somewhere in your CSS?. Another thing, avoid animating width and height of elements, it causes layout reflow which slows down the page. Instead, use scaleX or scaleY for width and height adjustment.

Working Fiddle: https://jsfiddle.net/5xjmkq4f/

CSS- KeyFrame invalid property value

1 Answers1