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

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