Как сделать плавный набор текста в input?
Чтобы избежать головняка с contenteditable можно подложить стилизованный div под input с прозрачным текстом. Но это всё равно не будет просто, т.к. потребуется вычислять разницу состояний и анимировать именно по месту ввода. 
Вот чисто концепт с анимацией только последнего символа:snippet
В инпате вы это не сделаете.
HTML позволяет управлять только видом отдельных элементов DOM. Символ в тексте это не элемент DOM, так что его придется в начале сделать таким.

Самый простой путь. Делаете input прозрачный поверх блока который имитирует поле ввода. При изменении текста в input сравниваете текст в нем и  блоке его имитирующем. Диф этих текстов добавляете в блок обернутым в например span, с наброшенным на него любым эффектом. По завершении анимации заменяете этот span на его содержимое.

Как-то так.