Slide from right to left animation using css
<p>currently I write code to display a hidden div using <code>jQuery</code>. But I want to make an animation effect for this div when it appearing in the window . 
  When I click on the window2 then window2 is appearing without an animation . How can I make window2 coming as a slide from left to right or right to left?</p>

<pre><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;


  &lt;style&gt;

      .row{
          margin-top:10%;
      }

      @media screen and (max-width: 327px) and (min-width:318px)
            { 
                .window2{
                    display:none;
                    width:20%;
                }
                #next{
                    background-color: black;
                    width:100%;
                    border:2px solid black;
                    color:white;
                    cursor:pointer;
                }
            }

  &lt;/style&gt;


 &lt;div class="container"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-sm-6 col-xs-12 window1"&gt;
          &lt;div style="width:80%;height:50%;border:1px solid black;"&gt;
              Hiii

          &lt;/div&gt;
          &lt;span id="next" class="visible-xs"&gt; window2&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-6 col-xs-10  window2"&gt;

          &lt;div style="height:50%;border:1px solid black;"&gt;
              Hello

          &lt;/div&gt;


      &lt;/div&gt;
  &lt;/div&gt;
 &lt;/div&gt;    
  &lt;script&gt;
      $("#next").on("click",function(){

         $(".window2").css("display","block"); 
         $(".window2").css("margin-top","-82%"); 
         $(".window2").css("left","80%"); 

      });

 &lt;/script&gt;
</code></pre>

<p>Please help . I tried </p>

<pre><code>.window2{
  -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;
}
</code></pre>

<p>But nothing change .</p>

<p>Thank you .</p>