Анимация блока при добавлении/убирании блока?

Question

[enchikiben]

Помогите как на css можно сделать такую анимацию, есть два дива в 1000 пикселей каждый, изначально показан первый, а второй справа от него торчит на 1/4 с края страницы, и когда добавляется класс к их родителю то первый уезжает влево и торчит на 1/4 с левого края страницы, а правый выезжает на его место и так остаются, а когда класс убираем то они откатывались назад.
Такое вообще возможно?

Answer 1

[iBird Rose]

двигай блоки через position:relative; left и right
а анимацию дай через transition

Comments

[Вячеслав Лебедев]

Двигать нужно через transform: translate. Для анимации это критично.

Answer 2

[Вячеслав Лебедев]

Решение в лоб не самое лучшее, можно и по лучше переписать, но это для простоты понимания и самостоятельной тренировки :)

Comments

[Вячеслав Лебедев]

не совсем по центру конечно получилось :(