если вы только начали - то покажите код, в котором что-то не получается - и вам сразу покажут где ошибка.
или у вас вообще нет представления о js - и вам нужно с 0 написать?
transition дает плавность только тем свойствам, которые имеют числовые значения (%, px..)
исходя из этого - используйте обходные пути, как вам посоветовали уже товарищи - opacity, fadeIn/Out etc..
Это никому не нужно, и такая постановка задачи может быть только из-за непонимания технологий.
Если подпишешься на эту бредятину - то можешь писать эту ерунду с помощью инлайнера, например такого templates.mailchimp.com/resources/inline-css
давай ссылки на работы - чтобы их можно было пощупать, с архивами никто возиться не любит
но попроси, чтобы тебе скинули тестовое - там где ты можешь показать свой уровень.
тестовое - это обычно что-то простенькое, что делается за 1-2 часа
ну добавляй к этим инпутам класс, и убирай когда они становятся валидными. в чем проблема-то?
или бустрапы всякие скачать умеем, а все остальное ставит в тупик?
без загрузки дважды врядли получится сделать прелоадер с процентным отображением хода загрузки
все что я находил в интернете - либо фейк, либо двойная загрузка