Why don't my CSS text color transitions work on input element placeholders in Firefox?

Why don't my CSS text color transitions work on input element placeholders
in Firefox?

Is it possible to apply a transition to the text color of the Firefox
placeholder element?
This code produces a nice fade effect on webkit browsers but just changes
the placeholder text from black to grey with no transition on Firefox.
(Tested on v22 and v23.)
Any help would be appreciated.
Live Demo: http://jsfiddle.net/H3J9t/
<style>
::-webkit-input-placeholder { color: inherit; opacity: 1; font-weight:
normal !important; -webkit-transition: color 0.3s; transition: color 0.3s;
/* WebKit */ }
:-moz-placeholder { color: inherit; opacity: 1; font-weight: normal
!important; -moz-transition: color 0.3s; transition: color 0.3s; /*
Firefox 4 to 18 */ }
::-moz-placeholder { color: inherit; opacity: 1; font-weight: normal
!important; -moz-transition: color 0.3s; transition: color 0.3s; /*
Firefox 19+ */ }
:-ms-input-placeholder { color: inherit; opacity: 1; font-weight: normal
!important; -ms-transition: color 0.3s; transition: color 0.3s; /*
Internet Explorer 10+ */ }
:focus::-webkit-input-placeholder { color: rgb(80%, 80%, 80%); /* WebKit */ }
:focus:-moz-placeholder { color: rgb(80%, 80%, 80%); /* Firefox 4 to 18 */ }
:focus::-moz-placeholder { color: rgb(80%, 80%, 80%); /* Firefox 19+ */ }
:focus:-ms-input-placeholder { color: rgb(80%, 80%, 80%); /* Internet
Explorer 10+ */ }
input { width: 100%; display: bock; font-size: 18pt; }
</style>
<input width="100%" placeholder="The color should change on focus, but it
should be a 300ms transition, not a jarring change." >