Как сверстать любой анимированный интерфейс для сайта разработанный на flinto?
Здравствуйте очень прошу объясните мне как сверстать любой анимированный интерфейс для сайта разработанный на flinto ?(анимированные кнопки, анимированное меню итд итп) на пример я разработал анимацию на flinto но не нашел в ней экспорта с кодом как вообще верстают такие классные анимации для интерфесов ? пример gif анимация строки поиска
Эм, ну как — как? Чтобы сверстать некий «любой анимированный элемент» нужно его… сверстать.
Да-да, вы не ослушались, его нужно сверстать — т. е. воспользоваться HTML, CSS, JS и, если нужно, canvas.
Ну а рассказывать обо всём диапазоне технологий и их практическом применении, во-первых, никто не сможет, а во-вторых, никто не будет. У вас слишком общий вопрос.
Sam Fises, как такового курса не найдёте, так как вам надо знать CSS и HTML, как минимум. Большинство анимаций основаны на CSS-свойствах, но не все, более сложные анимации и взаимодействия делаются на JS и SVG (к примеру, GSAP) как дополнение к CSS.
В вашем случае вам можно сделать с помощью тупой смены значение свойств элементов по смене класса через JS. Почему JS: класс должен меняться не только при наведении (hover), но и оставаться в случае активного (focus) поля ввода и если в поле есть данные.
Иными словами, курсом «как работают transition и keyframes в CSS» вам не обойтись.
пример gif анимация строки поиска 
Простой
