CSS not working when added to site.css file in ASP.NET Core project. But works when added as inline

Question

I'm testing an svg animation example (taken from Live Example section from here) on an ASP.NET Core project.

Image displays ok. When I add the following css inline to a specific view, the animation works but animation does NOT work when I add the same css to the site.css file (located by default at myProject\wwwroot\cs\site.css). Why?

View [Animation works after I moved the related css inside the view]

<div>
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">

        <path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
            s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
            C46.039,146.545,53.039,128.545,66.039,133.545z" />  
    </svg>
</div>
@section css{
    <style>
        .path {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: dash 5s linear alternate infinite;
        }

        @@keyframes dash {
            from {
                stroke-dashoffset: 1000;
            }

            to {
                stroke-dashoffset: 0;
            }
        }
    </style>
}

Snapshot of myProject\wwwroot\css\site.css file: [Animation did NOT work when the the above css was added to the end of following site.css file.

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}
...
...
}

/*I added for svg animation test*/
.path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 5s linear alternate infinite;
}

@keyframes dash {
    from {
        stroke-dashoffset: 1000;
    }

    to {
        stroke-dashoffset: 0;
    }
}

Answer 1

Had a similar problem and the solution was to force load the css (crtl+F5 in the browser). My browser had chached the old version and IIS Express does not force load it from source.