在規則沒有在Visual Studio工作

Question

所以我用代碼從這個鏈接： http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background

其中包含：

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

而且它導致此錯誤：

---

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

如果我刪除「at-rules」，它會工作得很好;但是，雲不會移動。

Answer 1

在女巫文件中你存儲的CSS？ 所有工作正常http://jsfiddle.net/jsbot/cr5g6580/ 副本index.html文件

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

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

Answer 2

由於Visual Studio的 「@」 符號表示的.NET代碼開始在CSHTML文件，需要加倍「@」符號才能將其取消。像這樣：

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

但是，如果你在CSS文件中添加CSS代碼，一個 「@」 符號會的工作，像這樣：

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