CSS:输入文本的渐隐过渡

Question

是否有一种方法来编写CSS过渡，将在输入文本元素中褪色，而用户正在打字?

目前，文本可以在一个普通的HTML文本元素中淡入，因为我们可以告诉它从0到1的不透明度过渡;但是输入文本在用户输入之前是不存在的。

例如，如果我输入我的用户名，我输入的字母逐渐淡入，每一个从0到1的不透明度在0.3秒内。

我试过使用过渡和动画，但想保持它在CSS。

Answer 1

实现类似效果的一种可能的方法:使用线性梯度创建部分透明的叠加，并在您键入时通过移动蒙版位置逐渐显示。

 <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;
}

小提琴的样子是这样的:

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

Answer 2

我不相信有任何方法可以用HTML input元素做到这一点，当然没有Javascript也不行。任何解决方案都要求您为每个字母创建单独的元素，然后分别对每个元素应用过渡。

如果你想要一个可视化的样子，看看这里的"type"的例子和附带的源代码:
http://codyhouse.co/demo/animated-headlines/index.html