Transition CSS duration not working

html css css-transitions transition

16,670

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.

16,670

JohnDoeTheFifth

Updated on June 13, 2022

Comments

JohnDoeTheFifth almost 2 years

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

JohnDoeTheFifth over 10 years

I must add: IF the #form-container is left:100px and #sliding-details is 0px, then it DOES WORK, but i get scaling isues and cannot do it like that. So Instead i put #form container at 0px and #sliding-details at -100px which breaks transition, very weird. they are both in the div #sliding-second
Nick Schmidt over 10 years

No problem! StackOverflow kindly helps you!
Uros Pocek almost 3 years

Yes, you just need to set the initial value of parameter you want to change on hover or any other action so browser can figure out how to make a transition.