Как добавить такой переключалке анимацию?

Question

[z_u_q]

Сделал такую переключалку по картинкам https://codepen.io/malinosky/pen/xjMrmO
Но еще нужно реализовать анимацию: синий и зеленый прямоугольники разъезжаются влево и вправо соответственно, затем съезжаются (зеленый прямоугольник перекрывает синий). Как мне такое реализовать? Сейчас они просто топорно переключаются.

Answer 1

[Антон Спирин]

@keyframes
Пример

Answer 2

[Андрей]

В каком нибудь редакторе, вроде "Hype 3" делается за несколько минут. Ручками муторно такие, кажущиеся простыми вещи делать. Там надо по мере разъезда прямоугольников, делать подмену слоев.
Правда "хайп" родит для такой элементарщины гору кода, включая всевозможные костыли для всеми любимого IE )))