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

Question

回答一些问题我试图展示文本输入占位符如何使用普通 CSS 而不使用 JavaScript / jQuery 在模糊上动画。我将 :not(:focus) 伪 class 与 input-placeholder 一起使用，并将闪烁动画放入其中。在 Chrome、IE 和 Opera 上运行良好，但在 Firefox 上运行失败。

如果我尝试设置其他属性，例如 color:red，它会起作用，所以我确信我的代码可以正确访问 blur 上的占位符。我还在带有文本的简单 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 }
}

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

Firefox fails to animate input text placeholder

html

firefox

input

css-animations