Firefox fails to animate input text placeholder

问题:

Answering some question I've tried to show how text input placeholder can be animated on blur using plain CSS without JavaScript / jQuery. I used the :not(:focus) pseudo class together with input-placeholder and put the blinking animation in it. On Chrome, IE and Opera it works perfectly, but on Firefox it fails.

If I try to set other property, for example color:red it works, so I'm sure that my code properly access the placeholder on blur. I also tried the same animation on a simple div with text and it works too. So, it seems that Firefox specifically fails to animate placeholder. Did I missed something or it's just a Firefox bug?

It's my code:

#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!">

and the same in CodePen

回答1:

Seems like ::-moz-placeholder don't animate in Firefox. Try to use @-moz-document url-prefix() for 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 }
}