Как сделать анимацию input?

Question

[Алексей Полоз]

Есть поле input, в нём placeholder установлен по центру, нужно чтобы при НАЖАТИИ была АНИМАЦИЯ перехода в ориентацию по левому краю
Толже самое с value - если есть значение / введено пользователем - при нажатии - в лево, при работе с другими элементами - текст переплывал в центр

В интернете искал - но там есть про transition с изменением отступов (но не про ориентацию текста - длина input может быть любой, может transition можно устанавливать на изменение ориентации текста?)

Answer 1

[Andrej Sharapov]

Как вариант, можно сделать без js
https://jsfiddle.net/qd5hc19a/3/

Comments

[Алексей Полоз]

Да такое, но независимо от размера input - тут всё в пикселях прописано

[Алексей Полоз]

Можно конечно с помощью js измерить размеры текста, input и прописывать эти пиксели при каждом изменении текста
Но вдруг есть более простой способ

Answer 2

[Максим Тимофеев]

https://jsfiddle.net/o1k9mbwd/6/

Comments

[Алексей Полоз]

анимация

[Максим Тимофеев]

Алексей Полоз, тогда js

[Алексей Полоз]

Максим Тимофеев, ну поэтому у меня и указан jquery в тегах

[Максим Тимофеев]

Алексей Полоз, Делаете скрытый инпут, а всю анимацию вешаете на обычные элементы. Как вариант можно в js вычислять left, заменять text-align: center на text-align: left при этом устанавливая left и плавно меняя его к нулю.