Как сделать простую анимацию на смену font-family и text-transform?

Question

[QnaTwitt]

Подскажите как можно сделать более менее плавную анимацию placeholder, там меняется text-transform: uppercase; и font-family
Вот код:
codepen

Answer 1

[Сергей delphinpro]

Свойства font-family и text-transform – дискретные. Они не могут плавно анимироваться.
В примере анимируются свойства color, font-size, top и transform.
Время анимации задается здесь transition: all 0.2s ease-in-out;