title: CSS @keyframe not working
body: <p>I have been going through examples and I've go to be missing something here. I can't get this simple css animation to fire, changing the color of some text. When I run the example below, the text stays black.</p>
  
  <p>I have an animation named "changeColor", applied to class "text" for an h1 element. It will fade from one color to another over 5 second intervals.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
              .text{
                  display:block;
                  -webkit-animation: changeColor 5s infinite; /* Safari 4+ */
                  -moz-animation: changeColor 5s infinite; /* Fx 5+ */
                  -o-animation: changeColor 5s infinite; /* Opera 12+ */
                  animation: changeColor 5s infinite; /* IE 10+ */
  
              }
              @keyframes changeColor {
                0% {
                  color: 'red';
                }
  
                100% {
                  color: 'blue';
                }
              }
              @-moz-keyframes changeColor {
                0% {
                  color: 'red';
                }
  
                100% {
                  color: 'blue';
                }
              }
              @-webkit-keyframes changeColor {
                0% {
                  color: 'red';
                }
  
                100% {
                  color: 'blue';
                }
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1 class="text"&gt;Not Working&lt;/h1&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>