Question

I have a little keyframe animation I use occastionally, it looks like so:

@-webkit-keyframes zoom-zoom {
    0% {
        -webkit-transform: scale(.1);
        opacity: 0;
    }
    70% {
        -webkit-transform: scale(1.2);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
    }
}

Works fine in a .CSS file but I’m converting this site to use less.js so all my stylesheet are getting rewritten, but this won’t process. It throws an error when it gets to 0% saying it’s not valid.

Any ideas?

Answer 1

I’m using less.php to compile .less to .css and it handles CSS3 animations properly. You can use the less.php demo to see it for yourself.

I guess this is a bug in the less.js compiler, you may want to consider reporting in on the github bug tracker of less.js. Till you get an official answer there, you can just use less.php for compiling it.