Smooth CSS transition using media queries

Question

I'm trying to create a smooth transition for a div that's placed elsewhere when @media only screen and (max-width: #) changes. The idea is when the max-width reaches, let's say, 600 pixels, the div smoothly transitions to another position.

Here's the fiddle: https://jsfiddle.net/8nQ6v/399/

This is a similar fiddle, transition is controlled by a click on the button: http://jsfiddle.net/8nQ6v/2/

HTML

<div id="square" class="position">

CSS

#square {
   height: 100px;
   width: 100px;
   background-color: red;
}

.position {
    position: absolute;
    bottom: 20px;
    left: 20px;
}

@media only screen and (max-width: 600px){
    .position {
       position: static!important;
    }
}

With the current HTML & CSS it instantly hops to the other position. I'm wondering if there is someway to smoothly transition this.

Answer 1

you can use css transition to animate

transition: ease all .5s;

and to animate don't change the position try changing the values

#square {
  height: 100px;
  width: 100px;
  background-color: red;
  transition: ease all .5s;

}
.position {
  position: absolute;
  bottom: 20px;
  left: 300px;
}
@media only screen and (max-width: 600px) {
  .position {
    bottom: 20px;
    left: 20px;
  }
}

<div id="square" class="position">
</div>