at-rules not working in visual studio

Question

So I'm using code from this link: http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background

Which contains:

@-webkit-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}

And it's causing this error:

---

"Parser Error

Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.

Parser Error Message: "-" is not valid at the start of a code block. Only identifiers, keywords, comments, "(" and "{" are valid.

Source Error:

Line 185: } Line 186: Line 187: @-o-keyframes moveclouds { Line 188: 0% { Line 189: margin-left: 1000px;"

If I remove the "at-rules" it'll work just fine; however, the clouds won't move.

Answer 1

Since Visual Studio's "@" sign indicates the beginning of .net code in a CSHTML file, one needs to double the "@" sign to cancel it out. Like so:

@@-webkit-keyframes moveclouds {
    0% {margin-left: 1000px;}
    100% {margin-left: -1000px;}
}

However, if you add the CSS code in the CSS file, one "@" sign will work, like so:

@-webkit-keyframes moveclouds {
        0% {margin-left: 1000px;}
        100% {margin-left: -1000px;}
    }