1

For some reason I cant seems to get placeholder transitions to work with Firefox. Here is a CodePen example. This example has placeholder transitions for both :hover and :focus. Both work with Chrome, neither work with Firefox.

BradleyDotNET
  • 60,462
  • 10
  • 96
  • 117
Kahless
  • 1,213
  • 2
  • 13
  • 31
  • @StephenThomas That solution does not work for me. Even the jsfiddle example in the answer is not working. There is no transition when viewed in Firefox. – Kahless Mar 21 '14 at 00:05

1 Answers1

0

I haven't had a problem other than needing the -moz prefix. Try:

h1 {
  color: #300;
  -moz-transition: color 2s;
  -webkit-transition: color 2s;
  -o-transition: color 2s;
  -ms-transition: color 2s;
  -transition: color 2s;
}
h1:hover {
  color: #933;
}

On the other hand, your situation may be related to an actual bug, too.

John C
  • 1,931
  • 1
  • 22
  • 34
  • The -moz prefix is already applied. Check out the CodePen and you'll see. Unless some how I used it incorrectly but I don't think so. – Kahless Mar 21 '14 at 00:02
  • Right you are, my mistake; I missed the link. It looks like [this question](https://stackoverflow.com/questions/18178660/why-dont-my-css-text-color-transitions-work-on-input-element-placeholders-in-fi) hit the same sort of stumbling block. Trying a few variations that are claimed to work, I can't do any better than an instant switch. – John C Mar 21 '14 at 00:47
  • Cool thanks for trying. It seems strange that so many resources say this should work but it doesn't. – Kahless Mar 21 '14 at 01:04