Wie @ -webkit im style-Tag zu verwenden ist

Question

Dies ist eine relativ einfache Frage, aber ich googelte herum ohne Glück. Ich versuche, den folgenden CSS-Code in ein Style-Tag auf meiner Seite einzufügen. Das Symbol "@" wird im Style-Tag nicht erkannt. Es funktioniert in der CSS-Datei nur nicht das style-Tag, und für organisatorische/Debugging-Zwecke würde ich es jetzt im Stil-Tag und nicht in der CSS. Irgendwelche Ideen?

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

Answer 1

Das oben angegebene Problem besagt, dass die Verwendung des "@" - Zeichens im Stil-Tag der aspx-Seite einen Kompilierungsfehler verursacht und die Seite unterbricht.

Unten ist der Code, den ich versuchte, in das Tag zu setzen.

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

Seite wurde ein Übersetzungsfehler zu werfen, weil das Symbol "@" für die Razor Motor reserviert ist (in asp .net MVC Web-Projekte verwendet). Die Lösung besteht darin, das Zeichen "@" durch ein anderes Zeichen "@" zu ersetzen. Also der folgende Code hat funktioniert.

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