keyframe - CSS lint parsing error - expected LBRACE error

Question

Need some help.

When looking at my CSS in CSS lint, they constantly report a parsing error, namely 'expected LBRACE error' Here is a screenshot of the issue: screenshot

They show issue on my closing bracket. I checked my code several times, and I just can't find, what could be the issue.

What I realized if I change the key-frame prefix order, then the error shows on different lines (so not always on the closing bracket)

Here is my code, please take a look, and let me know if somebody sees an error there, and what is it, thank you in advance:

.flat-desktop-content {
    background: url("../images/flat-desktop-content.svg") no-repeat scroll 0 0 transparent;
    background-size: cover;
    width: 360px;
    height: 290px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    -webkit-animation: flat-desktop 6s ease infinite;
       -moz-animation: flat-desktop 6s ease infinite;
            animation: flat-desktop 6s ease infinite;
}

@-webkit-keyframes flat-desktop {
    0% { background-position: 0 0; }
    50% { background-position: 0 -234px;}
    0% { background-position: 0 0; }
}

@-moz-keyframes flat-desktop {
    0% { background-position: 0 0; }
    50% { background-position: 0 -234px;}
    0% { background-position: 0 0; }
}

@keyframes flat-desktop {
    0% { background-position: 0 0; }
    50% { background-position: 0 -234px; }
    0% { background-position: 0 0; }
}?

Answer 1

CSSLint is not to blame.

The problem is that an invisible character is present in your code that is causing the error. Simply set your cursor to the offending line and column and hit backspace to erase the problematic character.

If you copy this code below to csslint you will not get an error because I removed the offending character.

@keyframes monkey {
    0% { background-position: 0 0; }
    50% { background-position: 0 -100px; }
}