Здравствуйте . Хочу я реализовать поиск точно такой же как на сайте Apple Inc. . У них анимация выполнено офигенно! Первое что бросается в глаза это - исчезновение ссылок и заполнение input. Супер просто!
Анимированным элементам - транзишны. кривые можно прямо у эппл спи.ть.
Начальное состояние свойств. Конечное состояние свойств (по классу, который можно вешать на общий родительский блок).
Анимируемые свойства - transform:translate, opacity и transform:rotateY (с backface-visibility: hidden)
полчаса-час посидеть и можно сделать один-в-один так же.
ну или тупо стили дёрнуть.
PHPjedi: нет. js там используется. но можно обойтись минимальным навешиванием класса на родительский блок при фокусе поля поиска.
Можно вообще без js, отплясывая от input:focus, но этот как раз тот случай, когда немного javascript лучше, чем чистый css.
не без греха эта анимация. страница противно дергается. да и ux сомнительный - зачем показывать интерфейс поиска поверх кнопок навигации, скрывая к ним доступ? в общем если снять розовые очки и поумерить щенячий восторг от того что "Это же эппл! Супер просто!" то можно реализовать решение получше.
Простой
