CSS：输入文本中的淡入过渡？答案

【问题标题】：CSS: Fade-in transition in input text?CSS：输入文本中的淡入过渡？
【发布时间】：2015-07-07 23:44:33
【问题描述】：

有没有办法编写一个 CSS 过渡，在用户输入时会在输入文本元素中淡入淡出？

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

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

我尝试过使用过渡和动画，但希望将其保留在 CSS 中。

【问题讨论】：

听起来不是特别友好，您确定要给用户带来不便吗？

标签： html css css-transitions

【解决方案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/

【讨论】：

【解决方案2】：

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

如果您想了解它的外观，请在此处查看“类型”示例和随附的源代码：
http://codyhouse.co/demo/animated-headlines/index.html

【讨论】：