火狐未能动画输入文本占位符(Firefox fails to animate input text

回答一些问题，我试图展示如何文本输入占位符可以模糊使用纯CSS没有JavaScript / jQuery的动画。我用的是:not(:focus)一起伪类input-placeholder ，把闪烁的动画吧。在Chrome，IE和Opera它完美的作品，但在Firefox它失败。

如果我尝试设置其他财产，比如color:red它的作品，所以我敢肯定，我的代码可以正确访问模糊的占位符。我也试过在一个简单的div的文字相同的动画，它也能工作。所以，看来火狐专门未能动画占位符。难道我错过了一些东西，或者它只是一个Firefox的错误？

这是我的代码：

 #theInput:not(:focus)::-webkit-input-placeholder { -webkit-animation: simple-blink-text 1s step-start infinite; } #theInput:not(:focus)::-moz-placeholder { color: red; animation: simple-blink-text 1s step-start infinite; } #theInput:not(:focus):-ms-input-placeholder { animation: simple-blink-text 1s step-start infinite; } @-webkit-keyframes simple-blink-text { 0% { color: black } 25% { color: transparent } 100% { color: black } } @keyframes simple-blink-text { 0% { color: black } 25% { color: transparent } 100% { color: black } }

 <input type="text" id="theInput" placeholder="This field is required!">

而在同一CodePen

好像::-moz-placeholder在Firefox不动画。尝试使用@-moz-document url-prefix()对于Firefox：

#theInput:not(:focus)::-webkit-input-placeholder {
  -webkit-animation: simple-blink-text 1s step-start infinite;
}
@-moz-document url-prefix() {
  #theInput:not(:focus) {
    animation: simple-blink-text 1s step-start infinite;
  }
}
#theInput:not(:focus):-ms-input-placeholder {
  animation: simple-blink-text 1s step-start infinite;
}
@-webkit-keyframes simple-blink-text {
  0% { color: black }
  25% { color: transparent }
  100% { color: black }
}
@keyframes simple-blink-text {
  0% { color: black }
  25% { color: transparent }
  100% { color: black }
}