<p dir="auto">Challenge <a href="http://beta.freecodecamp.com/en/challenges/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work" rel="nofollow">learn-how-the-css-keyframes-and-animation-properties-work</a> has an issue.<br>
User Agent is: <code class="notranslate">Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:51.0) Gecko/20100101 Firefox/51.0</code>.<br>
Please describe how to reproduce this issue, and include links to screenshots if possible.</p>
<p dir="auto">---result of animation doesn't work (animation name&amp;duration) <a class="user-mention notranslate" data-hovercard-type="organization" data-hovercard-url="/orgs/Keyframes/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Keyframes">@Keyframes</a> are ok;</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="

&lt;style&gt;
  
  div{
    height:40px;
    width: 70%;
    background:black;
    margin: 50 auto;
    border-radius: 5px;
  }

#rect {
  animation-name:rainbow;
  animation-duration:4s;
}


@keyframes rainbow {
  0% {
    background-color: blue;
   
    
  }
  50% {
    background-color: green;
   
  }
  100% {
    background-color: yellow;
  
    
  }
}
  
&lt;/style&gt;
&lt;div id=&quot;rect&quot;&gt;&lt;/div&gt;
"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
  
  <span class="pl-ent">div</span>{
    <span class="pl-c1">height</span><span class="pl-kos">:</span><span class="pl-c1">40<span class="pl-smi">px</span></span>;
    <span class="pl-c1">width</span><span class="pl-kos">:</span> <span class="pl-c1">70<span class="pl-smi">%</span></span>;
    <span class="pl-c1">background</span><span class="pl-kos">:</span>black;
    <span class="pl-c1">margin</span><span class="pl-kos">:</span> <span class="pl-c1">50</span> auto;
    <span class="pl-c1">border-radius</span><span class="pl-kos">:</span> <span class="pl-c1">5<span class="pl-smi">px</span></span>;
  }

<span class="pl-kos">#</span><span class="pl-c1">rect</span> {
  <span class="pl-c1">animation-name</span><span class="pl-kos">:</span>rainbow;
  <span class="pl-c1">animation-duration</span><span class="pl-kos">:</span><span class="pl-c1">4<span class="pl-smi">s</span></span>;
}


<span class="pl-k">@keyframes</span> rainbow {
  <span class="pl-c1">0<span class="pl-smi">%</span></span> {
    <span class="pl-c1">background-color</span><span class="pl-kos">:</span> blue;
   
    
  }
  <span class="pl-c1">50<span class="pl-smi">%</span></span> {
    <span class="pl-c1">background-color</span><span class="pl-kos">:</span> green;
   
  }
  <span class="pl-c1">100<span class="pl-smi">%</span></span> {
    <span class="pl-c1">background-color</span><span class="pl-kos">:</span> yellow;
  
    
  }
}
  
<span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">id</span>="<span class="pl-s">rect</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<h4 dir="auto">Issue Description</h4>
<p dir="auto">This is for the feature/curriculum-expansion branch only when run locally, and NOT the staging branch.</p>
<p dir="auto">For several challenges (challengeType: 0, using the code editor with the mobile-phone output layout), the jQuery method .css() doesn't seem to be accessing the styles applied in a <code class="notranslate">style</code> tag in the given code. This is affecting any assert tests that use a pattern of <code class="notranslate">assert($('selector').css('propertyToCheck') == 'valueToCompare', 'message: ...');</code>.Here's an example:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;style&gt;
 h2 {
   position: relative; 
   top: 15px;
 }
&lt;/style&gt;
&lt;body&gt;
  &lt;h1&gt;On Being Well-Positioned&lt;/h1&gt;
  &lt;h2 class=&quot;testCode&quot;&gt;Move me!&lt;/h2&gt;
  &lt;p&gt;I still think the h2 is where it normally sits.&lt;/p&gt;
&lt;/body&gt;
&lt;script&gt;
  console.log($('h2').attr('class')); // Works great, returns testCode
  console.log($('h2').css('position')); // returns undefined
  console.log($('h2').css('top')); // returns undefined
&lt;/script&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
 <span class="pl-ent">h2</span> {
   <span class="pl-c1">position</span><span class="pl-kos">:</span> relative; 
   <span class="pl-c1">top</span><span class="pl-kos">:</span> <span class="pl-c1">15<span class="pl-smi">px</span></span>;
 }
<span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">h1</span><span class="pl-kos">&gt;</span>On Being Well-Positioned<span class="pl-kos">&lt;/</span><span class="pl-ent">h1</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">h2</span> <span class="pl-c1">class</span>="<span class="pl-s">testCode</span>"<span class="pl-kos">&gt;</span>Move me!<span class="pl-kos">&lt;/</span><span class="pl-ent">h2</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>I still think the h2 is where it normally sits.<span class="pl-kos">&lt;/</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">'h2'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">attr</span><span class="pl-kos">(</span><span class="pl-s">'class'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// Works great, returns testCode</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">'h2'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">css</span><span class="pl-kos">(</span><span class="pl-s">'position'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// returns undefined</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">'h2'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">css</span><span class="pl-kos">(</span><span class="pl-s">'top'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// returns undefined</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">Related assert tests that aren't passing:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="assert($('h2').css('position') == 'relative', 'message: Add a CSS rule to specify that the &lt;code&gt;h2&lt;/code&gt; has a &lt;code&gt;position&lt;/code&gt; set to &lt;code&gt;relative&lt;/code&gt;.');

assert($('h2').css('top') == '15px', 'message: Use a CSS offset to relatively position the &lt;code&gt;h2&lt;/code&gt; 15px away from the &lt;code&gt;top&lt;/code&gt; of where it normally sits.');"><pre class="notranslate"><span class="pl-en">assert</span><span class="pl-kos">(</span><span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">'h2'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">css</span><span class="pl-kos">(</span><span class="pl-s">'position'</span><span class="pl-kos">)</span> <span class="pl-c1">==</span> <span class="pl-s">'relative'</span><span class="pl-kos">,</span> <span class="pl-s">'message: Add a CSS rule to specify that the &lt;code&gt;h2&lt;/code&gt; has a &lt;code&gt;position&lt;/code&gt; set to &lt;code&gt;relative&lt;/code&gt;.'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-en">assert</span><span class="pl-kos">(</span><span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">'h2'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">css</span><span class="pl-kos">(</span><span class="pl-s">'top'</span><span class="pl-kos">)</span> <span class="pl-c1">==</span> <span class="pl-s">'15px'</span><span class="pl-kos">,</span> <span class="pl-s">'message: Use a CSS offset to relatively position the &lt;code&gt;h2&lt;/code&gt; 15px away from the &lt;code&gt;top&lt;/code&gt; of where it normally sits.'</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h4 dir="auto">Browser Information</h4>
<ul dir="auto">
<li>Browser Name, Version: Firefox 48.0.1</li>
<li>Operating System: Mac OS X, El Capitan v10.11.3</li>
<li>Mobile, Desktop, or Tablet:</li>
</ul>