at-rules not working in visual studio - css

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;}
}

Answer 2

in witch file you store the css?
all working fine http://jsfiddle.net/jsbot/cr5g6580/
copy to index.html file
<div id="clouds">
<div class="cloud x1"></div>
<!-- Time for multiple clouds to dance around -->
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>
and to style.css
/*Lets start with the cloud formation rather*/
/*The container will also serve as the SKY*/
*{ margin: 0; padding: 0;}
body {
/*To hide the horizontal scroller appearing during the animation*/
overflow: hidden;
}
#clouds{
padding: 100px 0;
background: #c9dbe9;
background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
/*Time to finalise the cloud shape*/
.cloud {
width: 200px; height: 60px;
background: #fff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: relative;
}
.cloud:before, .cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.cloud:after {
width: 120px; height: 120px;
top: -55px; left: auto; right: 15px;
}
/*Time to animate*/
.x1 {
-webkit-animation: moveclouds 15s linear infinite;
-moz-animation: moveclouds 15s linear infinite;
-o-animation: moveclouds 15s linear infinite;
}
/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6; /*opacity proportional to the size*/
/*Speed will also be proportional to the size and opacity*/
/*More the speed. Less the time in 's' = seconds*/
-webkit-animation: moveclouds 25s linear infinite;
-moz-animation: moveclouds 25s linear infinite;
-o-animation: moveclouds 25s linear infinite;
}
.x3 {
left: -250px; top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8; /*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
.x4 {
left: 470px; top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75; /*opacity proportional to the size*/
-webkit-animation: moveclouds 18s linear infinite;
-moz-animation: moveclouds 18s linear infinite;
-o-animation: moveclouds 18s linear infinite;
}
.x5 {
left: -150px; top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8; /*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
#-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;}
}