CSS: Переход в исходный текст?

Question

Есть ли способ написать переход CSS, который будет исчезать во входном текстовом элементе во время ввода пользователем?

В настоящее время текст может исчезать внутри обычного текстового элемента HTML, потому что мы можем сказать ему перейти от 0 до 1 непрозрачности; но текст ввода не существует, прежде чем пользователь вводит его.

Так, например, если я ввожу свое имя пользователя, буквы, которые я печатаю, затухают, каждый из которых идет от 0 до 1 непрозрачности в 0,3 секунды.

Я пробовал использовать переход и анимацию, но хочу сохранить его в CSS.

Answer 1

Я не верю, что есть какой-либо способ сделать это с помощью элемента HTML input и, конечно, не без Javascript. Любое решение потребует от вас создания отдельных элементов для каждой буквы, а затем применять переходы к каждому элементу индивидуально.

Если вы хотите визуальное, что это будет выглядеть, проверить пример «типа» и сопроводительный исходный код здесь:
http://codyhouse.co/demo/animated-headlines/index.html

Answer 2

Возможным способ достижения подобного эффекта: создать частично прозрачного наложения с использованием линейного градиента и постепенно раскрывать по мере ввода, перемещая положение маски.

<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/