CODEWITHSUNDEEP
csscss-animationswebpack-2webpack-style-loader
Alejandro
Alejandro

Reputation: 2324

CSS- KeyFrame invalid property value

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?

Upvotes: 0

Views: 4423

Answers (1)

David Saginashvili
David Saginashvili

Reputation: 495

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/

Upvotes: 1

Related Questions