在 Visual Studio 2010 中的 CSS3 中无法识别块 @

【问题标题】：Block @ not recognized in CSS3 in Visual Studio 2010在 Visual Studio 2010 中的 CSS3 中无法识别块 @
【发布时间】：2015-05-31 07:38:58
【问题描述】：

我正在开发 vs2010 中的 css3。尝试一些动画。但智能感知给出错误“无法识别@块类型”和“ 关键帧不是已知的 css 属性名称”。以下是我尝试过的一些。

 @-webkit-keyframes animt1 {
0%   {background-color:red; left:0px; top:0px;}
25%  {background-color:yellow; left:200px; top:0px;}
50%  {background-color:blue; left:200px; top:200px;}
75%  {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
@keyframes animt1 {
from {background-color: red;}
to {background-color: yellow;}

请帮帮我。提前致谢。

【问题讨论】：

标签： css visual-studio-2010 razor css-animations

【解决方案1】：

问题

"@" 被识别为 razor 视图语法 - 因此它期望下一个文本成为 razor 语法的一部分。

Razor 语法几乎是“服务器端标记”，这意味着它后面的行被视为“服务器端代码”——而您希望在这里拥有客户端功能。

解决方案 1：外部 Css 文件

要解决此问题，您应该考虑使用“css 文件 (.css)”来阻止此语法被视为剃刀语法。

即：将此信息放入单独的 css 文件中，然后将样式表链接到您的 <head> 部分。

解决方案 2：转义 @ 符号

您还可以使用转义字符“@”将其转义出剃刀语法：

例如；

@@-webkit-keyframes progressBar {
        0% {
            width: 0;
        }

        100% {
            width: 100%;
        }
    }

【讨论】：