title: Animations wont run
body: <p>I'm trying to run some animations in scss and I'm running into difficulty. In chrome dev tools it shows my element has the correct animation set and I've even copy pasted the keyframes rule into codepen and tried it there and it worked, yet when I run it in my website it doesn't work. I've been stuck with this for hours.</p>
  
  <p>Here is a fiddle demonstraiting: <a href="http://jsfiddle.net/58xrZ/1/" rel="nofollow">http://jsfiddle.net/58xrZ/1/</a></p>
  
  <p>This was written in Scss and HAML and is as follows </p>
  
  <pre><code>ul.tab-selection {
        width: 38.338926174%;
        float: right;
        position: relative;
        min-height: 20em;
  
        li {
          text-align: center;
          height: 6em;
          width: 6em;
          border-radius: 50%;
          position: absolute;
  
          &amp;:first-child {
            background : radial-gradient(50% 50%, circle farthest-corner, rgba(98, 78, 44, 1) 0%, rgba(98, 78, 44, 0.66) 85.3%, rgba(98, 78, 44, 0.6) 100%);
            background : -moz-radial-gradient(50% 50%, circle farthest-corner, rgba(98, 78, 44, 1) 0%, rgba(98, 78, 44, 0.66) 85.3%, rgba(98, 78, 44, 0.6) 100%);
            background : -webkit-radial-gradient(50% 50%, circle farthest-corner, rgba(98, 78, 44, 1) 0%, rgba(98, 78, 44, 0.66) 85.3%, rgba(98, 78, 44, 0.6) 100%);
            top: 0;
            right: 50%;
            margin-right: -50px;      
            animation-name: first;
            animation-duration: 3s;
            -webkit-animation-name: first;
            -webkit-animation-duration: 3s;
            a {
              width: 4em;
              padding: 2em 1em
            }
          }
  
          &amp;:not(:first-child){
            bottom: 1.5em;
          }
  
  
          &amp;:nth-child(2) {
            background: radial-gradient(50% 50%, circle farthest-corner, rgba(121, 85, 48, 1) 0%, rgba(121, 85, 48, 0.66) 85.3%, rgba(121, 85, 48, 0.6) 100%);
            background: -moz-radial-gradient(50% 50%, circle farthest-corner, rgba(121, 85, 48, 1) 0%, rgba(121, 85, 48, 0.66) 85.3%, rgba(121, 85, 48, 0.6) 100%);
            background: -webkit-radial-gradient(50% 50%, circle farthest-corner, rgba(121, 85, 48, 1) 0%, rgba(121, 85, 48, 0.66) 85.3%, rgba(121, 85, 48, 0.6) 100%);
            filter: progid:DXImageTransform.Microsoft.Alpha(Stlye=2);
          }
  
          &amp;:last-child {
            background : radial-gradient(50% 50%, circle farthest-corner, rgba(111, 68, 44, 1) 0%, rgba(111, 68, 44, 0.66) 85.3%, rgba(111, 68, 44, 0.6) 100%);
            background : -moz-radial-gradient(50% 50%, circle farthest-corner, rgba(111, 68, 44, 1) 0%, rgba(111, 68, 44, 0.66) 85.3%, rgba(111, 68, 44, 0.6) 100%);
            background : -webkit-radial-gradient(50% 50%, circle farthest-corner, rgba(111, 68, 44, 1) 0%, rgba(111, 68, 44, 0.66) 85.3%, rgba(111, 68, 44, 0.6) 100%);
            filter: progid:DXImageTransform.Microsoft.Alpha(Stlye=2);
            right: 0;
            a {
              left: 3px;
              padding: 2em 1em;
            }
          }
  
          a {
            position: absolute;
            right: 0;
            left: 0;
            top: 0;
            font-family: 'Lora', serif;
            color: #AE843D;
            text-shadow: 0 -1px 0 black;
            padding: 1.5em 1em;
  
            &amp;:hover {
              color: #3D6F51;
            }
          }
        }
      }
  </code></pre>
  
  <p>and in Haml</p>
  
  <pre><code>%ul.tab-selection
    %li.active.current-projects
      %a{ :href =&gt; '#current-projects', 'data-toggle' =&gt; 'tab' }
        Current
        %br Projects
    %li.secret
      %a{ :href =&gt; '#secret', 'data-toggle' =&gt; 'tab' }
        The
        %br
        Secret Shop
    %li.favorite
      %a{ :href =&gt; '#favorite', 'data-toggle' =&gt; 'tab' }
        Favorite
        %br Links
  </code></pre>