Animate the element when responding to media queries. Maybe?

Question

css

Hello.
There is an absolute element, for example:

#logo{
  position: absolute;
  z-index: 1;
  display: block;
  width: 53px;
  height: 30px;
  background: url('/static/img/logo.png') no-repeat;
  opacity: 0.8;
  top: 15px;
  left: 20px;
}

And when adapting, in media-queries, it moves to the center of the container:

#logo{left:0;right:0;margin-left:auto;margin-right:auto;}

Everything works perfectly. But a question. Is it possible to make this movement animated (the element slides from left to right) using only CSS (no jquery)? Well, the person holds the tablet horizontally, and the logo on the left, turned it into a portrait - the element slid nicely. I hope I explained clearly.
ps Sorry, if it has already been discussed, I could not find anything.
Thanks in advance.

Answer 1

put transition: all .2s ease-out; just not in the media. and in the first case