CODEWITHSUNDEEP
htmlcsscss-transitions
Gadi
Gadi

Reputation: 31

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 we can tell it to transition from 0 to 1 opacity; but input text doesn't exist before a user types it in.

So for example, if I type in my username, the letters that I type fade in, each one going from 0 to 1 opacity in .3 seconds.

I've tried using transition and animation, but want to keep it within CSS.

Upvotes: 0

Views: 3262

Answers (2)

Duncan Thacker
Duncan Thacker

Reputation: 5188

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'>
    <input type='text'></input>
    <div class='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/

Upvotes: 6

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

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

Upvotes: 1

Related Questions