Как реализовать анимация для поиска на navbar?

Анимированным элементам - транзишны. кривые можно прямо у эппл спи.ть.
Начальное состояние свойств. Конечное состояние свойств (по классу, который можно вешать на общий родительский блок).
Анимируемые свойства - transform:translate, opacity и transform:rotateY (с backface-visibility: hidden)
полчаса-час посидеть и можно сделать один-в-один так же.
ну или тупо стили дёрнуть.

не, там даже проще, без 3d поворотов (показалось =) )
исчезновение ссылок - просто transform:scale(0) + opacity:0

Сергей: Огромное спасибо! :D

Сергей: Я так понимаю там все без js, это так?

PHPjedi: нет. js там используется. но можно обойтись минимальным навешиванием класса на родительский блок при фокусе поля поиска.
Можно вообще без js, отплясывая от input:focus, но этот как раз тот случай, когда немного javascript лучше, чем чистый css.

не без греха эта анимация. страница противно дергается. да и ux сомнительный - зачем показывать интерфейс поиска поверх кнопок навигации, скрывая к ним доступ? в общем если снять розовые очки и поумерить щенячий восторг от того что "Это же эппл! Супер просто!" то можно реализовать решение получше.