title: Changing placeholder color in animation
body: <p>I can't figure out how to make animated color change in text input.</p>
  
  <p>This is the css:</p>
  
  <pre><code>@keyframes anim {
      0% {
          opacity: 0.2;
          color:blue;
      }
  
      70% {
          opacity: 1;
          color: red;
      }
  
      100% {
          opacity: 0.1;
          color: blue;
      }
  }
  
  input,
  input::-webkit-input-placeholder {
      animation: anim 4s;
  
  }
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>&lt;input type="text" placeholder="Hello" /&gt;
  </code></pre>
  
  <p>JsBin:
  <a href="https://jsbin.com/yejiwipego/1/edit?html,css,output" rel="nofollow noreferrer">https://jsbin.com/yejiwipego/1/edit?html,css,output</a></p>
  
  <p>Opacity changes fine.
  I've got to be missing something?</p>