Search code examples
cssvisual-studio-2010razorcss-animations

Block @ not recognized in CSS3 in Visual Studio 2010

i am working on css3 in vs2010. Trying some animation. but intellisense is giving error "Unrecognized @ block type" and " keyframe is not a known css property name". Below is some i have tried.

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

Kindly help me out. Thanks in advance.

Solution

  • The Problem

    "@" is being recognised as razor view syntax - and so it is expecting the next text to be part of the razor syntax.

    Razor syntax pretty much is 'server side markup', meaning the line after it is seen as 'server side code' - whilst you're looking to have client side functionality here.

    More on razor

    Soln 1: External Css File

    To fix this issue, you should be looking to use 'css files (.css)' in order to stop this syntax from being seen as razor syntax.

    I.e: Place this information into a seperate css file, and then link the stylesheet into your <head> section.

    Soln 2: Escaping the @ symbol

    You could also use the escape character '@' to escape it out of the razor syntax:

    For example;

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

        100% {
            width: 100%;
        }
    }