SASS mixin that will hide the placeholder text for input fields. Right now Firefox doesn't do the transition so the text is hidden using opacity. Browser support is: Webkit based browsers, Firefox 19+, IE10

placeholder.scss

@mixin placeholder($prefix) {
    [placeholder]::-#{$prefix}-placeholder {
        @if $prefix != moz {
            text-indent: 0;
            transition: text-indent 500ms ease-out;
        } @else {
            opacity: 0.5;
            transition: opacity 500ms ease-out;
        }
    }
    [placeholder]:focus::-#{$prefix}-placeholder {
        @if $prefix != moz {
            text-indent: -100px;
            transition: text-indent 500ms ease-out 500ms;
            position: relative;
        } @else {
            opacity: 0;
            transition: opacity 500ms ease-out 500ms;
        }
    }
}

// usage
@each $browser in webkit-input, moz, ms-input {
    @include placeholder($browser);
}