Как реализовать такой анимационный feedback?

Question

[Mary Солнечная]

Коллеги, вечер добрый!
Памагите/спасите, возникла задача сделать анимашку в попапе.

Steps:
1)При клике на кнопку появляется блок:

2) После того, как конвертик всплыл, должен красиво появиться блок с птицей:

3) Потом этот конвертик с птицей отъезжают влево и скрываются. Тоже все плавно и красиво.

Ребята, сделала все, выставляла setTimeout для появления блоков, но все равно некрасивенько получается.
Подскажите как сделать не костыльно и чистенько, да еще чтобы красиво было? Буду благодарна любому примеру. Поделитесь, так скажем, вашей фантазией :) Пните, покажите, пожалуйста, куда надо смотреть и где бы подсмотреть?

Заранее всем большое спасибо!

Answer 1

[alex]

я конечно не великий аниматор, но можно все на css-animation запилить

Comments

[Mary Солнечная]

блин, спасибо огромное, вот это вообще что доктор прописал! А то я в анимацию не умею такую, хоть посмотрю, научусь! :)

[Mary Солнечная]

У меня только еще вопросец назрел - как этот код в jquery переписать? я пока чистый js учу, есть еще проблемы перехода)

[alex]

Mary Солнечная: держите на jq

[Mary Солнечная]

Значит я прально сделала, спасибо! был косяк в одном месте, вот я и засомневалась)