title: text-shadow css3 animation / transition not working
body: <p>I can't work out why this isnt working, I'v checked this against other examples, such as on codePen here: </p>
  
  <p><a href="http://codepen.io/NobodyRocks/pen/qzfoc" rel="nofollow">http://codepen.io/NobodyRocks/pen/qzfoc</a></p>
  
  <p>my css:</p>
  
  <pre><code>.text-header {
      font-family: "oxygenlight";
      text-transform: uppercase;
      color:$bright-yellow;
      -webkit-animation: yellowPulse 2s ease-in-out infinite alternate;
      -moz-animation: yellowPulse 2s ease-in-out infinite alternate;
      -ms-animation: yellowPulse 2s ease-in-out infinite alternate;
      -o-animation: yellowPulse 2s ease-in-out infinite alternate;
      animation: yellowPulse 2s ease-in-out infinite alternate;
  }
  
  @-webkit-keyframes yellowPulse {
      from { 
          text-shadow: 
              1px 0px 25px rgba(248,235,51,1),
              0px 1px 25px rgba(248,235,51,1),
              -1px 0px 25px rgba(248,235,51,1),
              0px -1px 25px rgba(248,235,51,1),
              1px 4px 25px rgba(248,235,51,1);
      }
      50% { 
          text-shadow: 
              1px 0px 25px rgba(248,235,51,0),
              0px 1px 25px rgba(248,235,51,0),
              -1px 0px 25px rgba(248,235,51,0),
              0px -1px 25px rgba(248,235,51,0),
              1px 4px 25px rgba(248,235,51,0);
      }
      to {
          text-shadow:
              1px 0px 25px rgba(248,235,51,1),
              0px 1px 25px rgba(248,235,51,1),
              -1px 0px 25px rgba(248,235,51,1),
              0px -1px 25px rgba(248,235,51,1),
              1px 4px 25px rgba(248,235,51,1);
      }
  }
  </code></pre>