Как сделать чтобы рисунок плавно открывался и закрывался как ворота?

Question

[Ratibor]

Доброе время суток! Не могу сообразить как сделать так называемые ворота, вот код https://codepen.io/RatiboR1978/pen/bXNPxz?editors=1100 если не задавать время анимации то все ок, но получается не плавно это видно по правому рисунку, если задаю время анимации и прописываю только transform открывается идеально, но закрывается криво рассинхрон по времени transform и transform-origin, если прописываю transition: all .4s; то открывается криво со скачком а закрывается идеально, как сделать что все было идеально и закрытие и открытие?

Comments

[Владимир]

Вроде плавно.

[Ratibor]

Владимир, нет не много не так вот я сделал https://codepen.io/RatiboR1978/pen/ZgYgKe

Answer 1

[Ratibor]

Мое решение https://codepen.io/RatiboR1978/pen/ZgYgKe