CSS流畅的动画不起作用

Question

CSS动画代码无法正常工作。当检查#Tools_Button时，我希望#tools_hidden可见并从顶部移动：0％到顶部：平滑6％。这是代码：

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

脚本严格限制我的项目。因此，请不要考虑添加脚本。

Answer 1

您可以使用动画opacity而不是display来获得所需的效果：

#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

也许无法使用Display属性进行。因此，我将DIV的第一个位置更改为-6％，并删除了两个显示：无和显示：块。这是新的CSS代码：

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

HTML代码仍然是旧的。