CSS smooth move animation not working

Question

The css animation code isn't working. When #tools_button is checked, I want #tools_hidden to become visible and move from top:0% to top:6% smoothly. Here is the code:

#tools_hidden {
  position: fixed;
  left: 10%;
  top: 0;
  display: none;
  -webkit-transition: width 2s;
  /* For Safari 3.1 to 6.0 */
  transition: top 0.5s;
}

#tools_button:checked~#tools_hidden {
  position: fixed;
  left: 10%;
  top: 6%;
  display: block;
}

<div id="tools">
  <span>
    <input type="checkbox" id="tools_button">
     <label for="tools_button">
      <img src="img/tools.png" id="tools_icon" alt="">
       <span id="tools_label">
       Tools
      </span>
  </label>
  <span id="tools_hidden">
     this is hidden
    </span>
  </span>
</div>

Scripts are strictly restricted for my project. So, please don't think of adding scripts.

Possible duplicate of [Transitions on the display: property](https://stackoverflow.com/questions/3331353/transitions-on-the-display-property) — sol, Sep 29 '17 at 11:48
@Rob animation is not working. When I check the checkbox, the #tools_hidden is becoming visible. It's position is also changing correctly. But I tried to add transition over changing the position. I tried to make it move down slowly. But it's not working. The div is not moving smoothly. — Jishnuraj, Sep 29 '17 at 11:49
@Jishnuraj You can not use transition on the `display` property like that. You can check my answer for an alternative, or look at the many other answers on this topic — sol, Sep 29 '17 at 11:51
@ovokuro No. This code is not like that. I don't want to add transition with visibility. I want to move the div smoothly. — Jishnuraj, Sep 29 '17 at 12:18

score 1 · Answer 1 · answered Sep 29 '17 at 11:47

You can use animate opacity instead of display to get the effect you want:

#tools_hidden {
  position: fixed;
  left: 10%;
  top: 0;
  opacity: 0;
  -webkit-transition: width 2s;
  /* For Safari 3.1 to 6.0 */
  transition: top 0.5s;
}

#tools_button:checked~#tools_hidden {
  position: fixed;
  left: 10%;
  top: 6%;
  opacity: 1;
}

<div id="tools">
  <span>
            <input type="checkbox" id="tools_button">
                <label for="tools_button">
                    <img src="img/tools.png" id="tools_icon" alt="">
                        <span id="tools_label">
                        Tools
                    </span>
  </label>
  <span id="tools_hidden">
                this is hidden
            </span>
  </span>
</div>

This won't work. If we remove display: none property and add opacity, then we will not be able to check the checkbox — Jishnuraj, Sep 29 '17 at 12:21

score 0 · Answer 2 · answered Sep 29 '17 at 12:33

Maybe it's not possible to do with display property. So, I've changed the first position of div to -6% and removed both display: none and display: block. Here is the new css code:

#tools
      {
        height:6vh;
        background-color:#747474;
        font-size:5em;
      }
#tools_icon
      {
        height:90%;
        width:5vh;
      }
#tools_hidden
      {
                height:6vh;
        background-color:#747474;
        font-size:1em;
        position:fixed;
        left:10%;
        top:-6%;
        -webkit-transition: top 2s; /* For Safari 3.1 to 6.0 */
        transition: top 0.5s;
      }
#tools_button:checked ~ #tools_hidden{
        position:fixed;
        left:10%;
        top:7%;
      }

The HTML code is still the old one.

CSS smooth move animation not working

2 Answers2