title: Slide from right to left animation using css
body: <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>