Css: Fade-in Transition In Input Text?

Is there a way to write a CSS transition that would fade in an input text element while the user is typing? Currently, text can fade in within a normal HTML text element because w

Solution 1:

A possible way to achieve a similar effect: create a partially transparent overlay using linear-gradient and gradually reveal as you type by moving the mask position.

 <div id='container'>
    <inputtype='text'></input><divclass='fader'></div>
 </div>

$("input").on("keydown", function(e) {
    var width = $("input").val().length + 1;
    $(".fader").css("left", (width * 8) + 3);
});


#container {
    position: relative;
    height: 25px;
    width: 400px;
}

input {
    width: 100%;
}

input, .fader {
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    font-family: monospace;
}

.fader {
    top: 2px;
    bottom: 4px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0px, white, 15px, white 100%);
    transition: left 1s ease;
}

Here's what it looks like as a fiddle:

http://jsfiddle.net/go7trwzx/1/

Solution 2:

I don't believe there is any way to do this with an HTML input element, and certainly not without Javascript. Any solution would require you to create individual elements for each letter, then apply transitions to each element individually.

If you'd like a visual of what that would look like, check out the "type" example and accompanying source code here: http://codyhouse.co/demo/animated-headlines/index.html