CSS smooth move animation not working - css

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.

Answer 1

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>

Answer 2

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.