CSS: transición de transición en el texto de entrada?

¿Hay alguna forma de escribir una transición de CSS que se desvanezca en un elemento de texto de entrada mientras el usuario escribe?

Actualmente, el texto puede aparecer dentro de un elemento de texto HTML normal porque podemos indicarle que haga la transición de 0 a 1 opacidad; pero el texto de entrada no existe antes de que un usuario lo escriba.

Por ejemplo, si escribo mi nombre de usuario, las letras con las que escribo se desvanecen, y cada una va de 0 a 1 de opacidad en .3 segundos.

He intentado usar la transición y la animación, pero quiero mantenerlo dentro de CSS.

Una posible forma de lograr un efecto similar: cree una superposición parcialmente transparente utilizando un degradado lineal y revele gradualmente a medida que escribe moviendo la posición de la máscara.

$("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; }

Esto es lo que parece un violín:

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

No creo que haya ninguna manera de hacer esto con un elemento de input HTML, y ciertamente no sin Javascript. Cualquier solución requerirá que cree elementos individuales para cada letra, luego aplique transiciones a cada elemento individualmente.

Si desea una visualización de cómo se vería, consulte el ejemplo de “tipo” y el código fuente que lo acompaña aquí:
http://codyhouse.co/demo/animated-headlines/index.html