Firefox 无法为输入文本占位符设置动画

Question

回答一些问题我试图展示如何在没有 JavaScript / jQuery 的情况下使用纯 CSS 对文本输入占位符进行动画处理。我将:not(:focus) 伪类与input-placeholder 一起使用，并将闪烁动画放入其中。在 Chrome、IE 和 Opera 上它运行良好，但在 Firefox 上却失败了。

如果我尝试设置其他属性，例如 color:red 它可以工作，所以我确信我的代码可以正确访问模糊时的占位符。我还在一个带有文本的简单 div 上尝试了相同的动画，它也可以工作。因此，Firefox 似乎特别无法为占位符设置动画。我错过了什么还是只是 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中也一样

Answer 1

似乎::-moz-placeholder 在 Firefox 中没有动画效果。尝试在 FireFox 中使用 @-moz-document url-prefix()：

#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 }
}