Css 如何在样式标记中使用@-webkit

这是一个相对简单的问题，但我在谷歌上到处搜索，运气不好。我正在尝试将以下CSS代码放入页面上的样式标记中。样式标记中无法识别“@”符号。它在CSS文件中工作，而不是样式标记，出于组织/调试的目的，我希望它现在在样式标记中，而不是在CSS中。有什么想法吗

 .spinnerClass {
    height: 50px;
    width: 50px;
    margin: 0px auto;
    -webkit-animation: rotation .8s linear infinite;
    -moz-animation: rotation .8s linear infinite;
    -o-animation: rotation .8s linear infinite;
    animation: rotation 0.8s linear infinite;
    border-left: 10px solid rgb(0,150,240);
    border-right: 10px solid rgb(0,150,240);
    border-bottom: 10px solid rgb(0,150,240);
    border-top: 10px solid rgb(100,0,200);
    border-radius: 100%;
    background-color: rgb(200,100,250);
}
    @-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
    @-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}
    @-o-keyframes rotation {
    from {-o-transform: rotate(0deg);}
    to {-o-transform: rotate(360deg);}
}
    @keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

---

上面提到的问题是，在aspx页面的样式标记中使用“@”字符会导致编译错误并中断页面

下面是我试图放入标记的代码

<style>
    @-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
    @-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}
    @-o-keyframes rotation {
    from {-o-transform: rotate(0deg);}
    to {-o-transform: rotate(360deg);}
}
    @keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
<style>

@-webkit关键帧旋转{
从{-webkit变换：旋转（0度）；}
到{-webkit变换：旋转（360度）；}
}
@-moz关键帧旋转{
从{moz变换：旋转（0度）；}
到{moz变换：旋转（360度）；}
}
@-o-关键帧旋转{
从{o-变换：旋转（0度）；}
到{o-变换：旋转（360度）；}
}
@关键帧旋转{
从{变换：旋转（0度）；}
到{变换：旋转（360度）；}
}

页面抛出编译错误，因为“@”符号是为Razor引擎保留的（在asp.net MVC web项目中使用）。解决方案是用另一个“@”字符转义“@”字符。下面的代码就是有效的

<style>
    @@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
    @@-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}
    @@-o-keyframes rotation {
    from {-o-transform: rotate(0deg);}
    to {-o-transform: rotate(360deg);}
}
    @@keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
<style>

@@-webkit关键帧旋转{
从{-webkit变换：旋转（0度）；}
到{-webkit变换：旋转（360度）；}
}
@@-moz关键帧旋转{
从{moz变换：旋转（0度）；}
到{moz变换：旋转（360度）；}
}
@@-o-关键帧旋转{
从{o-变换：旋转（0度）；}
到{o-变换：旋转（360度）；}
}
@@关键帧旋转{
从{变换：旋转（0度）；}
到{变换：旋转（360度）；}
}

hmm请参见更新的描述，该代码在CSS文件中得到了很好的识别。这是CSS 3旋转。这发生在哪个浏览器中？所有浏览器？嗨@timolawl谢谢你回复我。我发现了这个问题，答案如下。非常感谢。