title: CSS not working when added to site.css file in ASP.NET Core project. But works when added as inline
body: <p>I'm testing an <code>svg animation</code> example (taken from <strong>Live Example</strong> section from <a href="https://css-tricks.com/svg-line-animation-works/" rel="nofollow noreferrer">here</a>) on an <code>ASP.NET Core</code> project.</p>
  <p>Image displays ok. When I add the following <code>css</code> <strong>inline</strong> to a specific <code>view</code>, the <strong>animation</strong> works but animation does NOT work when I add the same <code>css</code> to the site.css file (located by default at <code>myProject\wwwroot\cs\site.css</code>). Why?</p>
  <p><strong>View</strong> [Animation works after I moved the related css inside the view]</p>
  <pre><code>&lt;div&gt;
      &lt;svg version=&quot;1.1&quot; id=&quot;Layer_1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; x=&quot;0px&quot; y=&quot;0px&quot;
               width=&quot;340px&quot; height=&quot;333px&quot; viewBox=&quot;0 0 340 333&quot; enable-background=&quot;new 0 0 340 333&quot; xml:space=&quot;preserve&quot;&gt;
  
          &lt;path class=&quot;path&quot; fill=&quot;#FFFFFF&quot; stroke=&quot;#000000&quot; stroke-width=&quot;4&quot; stroke-miterlimit=&quot;10&quot; d=&quot;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&quot; /&gt;  
      &lt;/svg&gt;
  &lt;/div&gt;
  @section css{
      &lt;style&gt;
          .path {
              stroke-dasharray: 1000;
              stroke-dashoffset: 1000;
              animation: dash 5s linear alternate infinite;
          }
  
          @@keyframes dash {
              from {
                  stroke-dashoffset: 1000;
              }
  
              to {
                  stroke-dashoffset: 0;
              }
          }
      &lt;/style&gt;
  }
  </code></pre>
  <p><strong>Snapshot of myProject\wwwroot\css\site.css file</strong>: [Animation did NOT work when the the above css was added to the end of following site.css file.</p>
  <pre><code>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;
      }
  }
  </code></pre>