Переход продолжительностью CSS не работает

Question

Я не могу иметь переход продолжительности, работающий только на одном из моих div на моем веб-сайте.

если вы идете в разделе контакты, курсор на карте, переход DIVS мелкий

при наведении на разделе детали (серая зона с 3-мя иконками) перехода работы на этом DIV, как он скользит влево и внутри div также.

, но контактная форма не должна зависеть от продолжительности перехода, она привязывается влево.

здесь является веб-сайт: http://www.onepixelroom.com/londonrefurb/

вот код:

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:hello@onethousandsheep.com?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">HELLO@DRONINRENOVATIONS.COM</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

Вы должны установить начальное левое значение для form-container. Если исходное левое значение отсутствует, браузер не знает, где можно оживить значение набора.

#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; 
} 

Это должно исправить вашу проблему.

Answer 2

Проверить это

transition : all 0.2s ease-in-out; 
     -o-transition  : all 0.2s ease-in-out; 
     -moz-transition  : all 0.3s ease-in-out; 
    -webkit-transition : all 0.3s ease-in-out;