Transition CSS duration not working

Question

I can't seem to have duration transition working on just one of my divs on my web site.

if you go to the contact section, hover on the map, the divs transition fine

if you hover on the detail section (the grey area with 3 icons) the transition work on that div as it slides left and the inside div as well.

but the contact form doesnt want to be affected by transition duration, it snaps to the left.

here is the web site: http://www.onepixelroom.com/londonrefurb/

here is the code:

HTML:

    <div id="contact-div">
      <div id="contact-title-box">
    <div id="contact-title">
          <h1>CONTACT</h1>
          <hr>
        </div>
  </div>
      <div id="map_canvas-antialiasing"></div>
      <div id="sliding-footer">
    <div id="map_canvas"></div>
    <div id="sliding-second">
          <div id="sliding-details">
        <div id="sliding-details-container"> <a href="mailto:[email protected]?subject=Web Site Enquiry" style="text-decoration:none">
          <div class="sliding-details-box">
            <div class="sliding-details-square-hover"></div>
            <div class="sliding-details-img"><img src="http://www.onepixelroom.com/londonrefurb/img/mail.png"/></div>
            <div class="sliding-details-txt">[email protected]</div>
          </div>
          </a> <a href="skype:0044750221963?call" style="text-decoration:none">
          <div class="sliding-details-box">
            <div class="sliding-details-square-hover"></div>
            <div class="sliding-details-img"><img src="http://www.onepixelroom.com/londonrefurb/img/phone.png"/></div>
            <div class="sliding-details-txt">+44 07502221963</div>
          </div>
          </a> <a href="https://maps.google.com/maps?q=10+Elm+Park+Gardens,+London+SW10+9NY,+United+Kingdom&hl=en&sll=51.487207,-0.177784&sspn=0.012146,0.021801&hnear=10+Elm+Park+Gardens,+London+SW10+9NY,+United+Kingdom&t=m&z=16"  style="text-decoration:none" target="_blank">
          <div class="sliding-details-box">
            <div class="sliding-details-square-hover"></div>
            <div class="sliding-details-img"><img src="http://www.onepixelroom.com/londonrefurb/img/home.png"/></div>
            <div class="sliding-details-txt">SOUTH KENSINGTON, LONDON UK</div>
          </div>
          </a> </div>
      </div>
          <div id="form-container">
        <div id="form-wrap">
              <form method="post" action="contactengine.php" id="commentForm">
            <fieldset>
                  <div id="formLeft">
                <label for="Name"></label>
                <div class="input-bg">
                      <input type="text" name="Name" placeholder="Name" id="Name" />
                    </div>
                <label for="Tel"></label>
                <div class="input-bg">
                      <input type="text" name="Tel" placeholder="Number" id="Tel" />
                    </div>
                <label for="Email"></label>
                <div class="input-bg">
                      <input type="text" name="Email" placeholder="Email" id="Email" />
                    </div>
              </div>
                  <div id="formRight">
                <label for="Message"></label>
                </td>
                <div class="message-bg">
                      <textarea name="Message" placeholder="Message" id="Message" rows="20" cols="20" ></textarea>
                    </div>
                <br />
                <input type="submit" name="submit" value="Submit" class="submit-button" />
              </div>
                  <div class="clear"></div>
                </fieldset>
          </form>
            </div>
      </div>
        </div>
  </div>
    </div>

CSS:

#contact-div {
    height:760px;
    float:left;
    margin:0 auto;
    width:100%;
}

#contact-title-box
{
    height:300px;
    position:relative;
}
#contact-title {
    top:110px;
    position:relative;
}
#contact-title hr {
    position:relative;
    top:30px;
    width: 230px;
    margin:0 auto;
    border: 0; 
    height: 1px; 
    background-color:#49E2D6;
}
#contact-title h1 {
    font-family: Raleway, Verdana, sans-serif;
    font-size: 50px;
    font-weight: 200;
    font-style: normal;
    letter-spacing: 3px;
    color: #3A3A3A;     
}
#sliding-footer {
    z-index: 0;
    height: 450px;
    width:100%;
}
#map_canvas-antialiasing {
    height:10px;
    position:relative;
    background-color:#FFFFFF;
    -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    z-index:3;
}
#map_canvas {
    float:left;
    width: 100%;
    height: 450px;
    cursor: url(http://www.onepixelroom.com/londonrefurb/img/cursor.png) 21 26, move;
}
#map_canvas:hover + #sliding-second
{
left:45%;   
}
#sliding-second {
    background-color: #dce9e8;
    position: absolute;
    left: 20%;
    width: 80%;
    height: 450px;
    z-index:3;
    margin: 0 auto;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}
#sliding-details {
    width: 700px;
    height: 450px;
    background-color: #363636;
    position: absolute;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    left:-100px;
}
#sliding-details-container {
    float: left;
    top: 103px;
    margin: 0 auto;
    width: 400px;
    height: 200px;
    position: relative;
    left:25px;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}
.sliding-details-box:hover .sliding-details-square-hover{
    transform: translate(0,-50px);
    -webkit-transform: translate(0,-50px);
    -o-transform: translate(0,-50px);
    -moz-transform: translate(0,-50px);
}
.sliding-details-box {
    margin-bottom:50px;
    height: 50px;
    width: 400px;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    overflow:hidden;
}
.sliding-details-box:hover{
cursor: url(http://www.onethousandsheep.com/img/cursor.png) 21 26, move;    
}
.sliding-details-square-hover {
    float: left;
    background: #FFFFFF;
    background: -moz-linear-gradient(top, #FFFFFF 50%, #49E2D6 50%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#FFFFFF), color-stop(50%,#49E2D6));
    background: -webkit-linear-gradient(top, #FFFFFF 50%,#49E2D6 50%);
    background: -o-linear-gradient(top, #FFFFFF 50%,#49E2D6 50%);
    background: -ms-linear-gradient(top, #FFFFFF 50%,#49E2D6 50%); 
    background: linear-gradient(to bottom, #FFFFFF 50%,#49E2D6 50%);
    position: relative;
    border: none;
    width: 50px;
    height: 100px;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}
.sliding-details-img img {
    border: none;
    position:relative;
    top:15px;
    width: 20px;
    height: 20px;
}
.sliding-details-img {
    position:absolute;
    width: 50px;
    height: 50px;
}
.sliding-details-txt {
    z-index: 2;
    float: left;
    position: relative;
    top: 16px;
    margin-left: 30px;
    width: 300px;
    text-align: left;
    font-family: 'Droid Sans', serif;
    font-size: 14px;
    font-weight: 800;
    color: #dce0df;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    letter-spacing:2px;
    overflow:hidden;
}
#sliding-details:hover + #form-container {
    left:600px;
}
#sliding-details:hover #sliding-details-container {
    left:14%;   
}
#form-container {
    background-color: #49E2D6;
    height: 450px;
    width: 100%;
    position:relative;
    z-index:3;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}
#form-wrap {
    width: 1000px;
    background-color: #49E2D6;
    height: 300px;
    position: relative;
    margin: 0 auto;
    top:85px;
    z-index:3;
}

Answer 1

You must set an initial left value for form-container. If there is no initial left value the browser doesn't know from where to animate to the set hover value.

#form-container {
    background-color: #49E2D6;
    height: 450px;
    width: 100%;
    position:relative;
    z-index:3;
    left: 0; // This one is important!
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}

This should fix your issue.