Syntax Highlighting - @keyframes

Version 3.2.200.20308

Syntax error on @keyframes

Documentation: https://developer.mozilla.org/en/CSS/@keyframes

Example:

@-webkit-keyframes animate-loading-bar {
    0% { background-position: 0 0; }
    100% { background-position: 50px 50px; }
}   
@-moz-keyframes animate-loading-bar {
    0% { background-position: 0 0; }
    100% { background-position: 50px 50px; }
}   
@-ms-keyframes animate-loading-bar {
    0% { background-position: 0 0; }
    100% { background-position: 50px 50px; }
}   
@keyframes animate-loading-bar {
    0% { background-position: 0 0; }
    100% { background-position: 50px 50px; }
}

Thanks for reporting this! I have added in parsing support for this syntax and this will be available in the next nightly build for you.

Jeremy

Hi, I'm interesting in this update. When will it be ready?

This is already available in the nightlies. If you are using the free version then this will be available with the next gallery update which we will be pushing up in a week or so.

Jeremy

I'm still having trouble with this. Version 3.2.400.21116

This results in a syntax error:

@-webkit-keyframes fade {
    0% { 
        opacity: 0; 
    }
    100% { 
        opacity: 1; 
    }
}

While this compiles:

@-webkit-keyframes fade {
    0%   { 
        opacity: 0; 
    }
    100% { 
        opacity: 1; 
    }
}​{}

Thanks.

Just to clarify is this relating to the generated output or the syntax highlighting of the block in question? I am not seeing any syntax error for highlighting of the block.

Jeremy

Sorry, not the highlighting the actual compiling itself is returning a syntax error, which keeps the entire CSS file from compiling.

What is the error you are seeing come back from the SASS compiler? I am not seeing an error here for the first block - the second block indicates invalid syntax due to the trailing {}

Jeremy

Sure, here's the error:

Syntax error: Invalid CSS after "}​": expected "{", was ""
        on line 9 of test.scss
  Use --trace for backtrace.

And then if I add the {, I get this error:

Syntax error: Invalid CSS after "}​{": expected "}", was ""
    on line 9 of test.scss

Use --trace for backtrace.

And if I then add the } everything will compile.

Very odd - Im not seeing any error. We have recently upgraded SASS to 3.2 though so I am guessing that must be the difference. We are pushing up a new gallery update today so if you are able to test this out after it updates let me know if that changes it or if you are still seeing the problem.

Jeremy