Firefox fails to animate input text placeholder

Question

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

Try the [answers here](http://stackoverflow.com/questions/13955163/imitating-a-blink-tag-with-css3-animations). — Rahul Desai, Feb 12 '15 at 11:55
@AlexanderDayan I was just throwing in ideas that might help you. — Rahul Desai, Feb 12 '15 at 12:12
@RahulDesai No problem, simply the answer that you've suggested not answered my question :) Please see solution by Pinal below, it's just great. — Alexander Dayan, Feb 12 '15 at 12:21

score 3 · Accepted Answer · answered Feb 12 '15 at 11:55

3

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

answered Feb 12 '15 at 11:55

Alex

11,115
12
51
64

It works: http://codepen.io/rijii49/pen/YPYmxK ! Thank you for your amazing answer! – Alexander Dayan Feb 12 '15 at 12:08
Further investigating this issue I found an additional problem. Because your solution animates the whole control and not a placeholder it blinks even if some text was inserted. However, I found the additional hack that solves it: if the control has 'required' attribute then ':invalid' pseudo class can be used to detect the empty value (see updated CodePen). Anyway, your answer was very good :) – Alexander Dayan Feb 12 '15 at 13:14

Firefox fails to animate input text placeholder

1 Answers1

Linked