CSS平滑移动动画不起作用

Question

CSS 动画代码不工作。当选中#tools_button 时，我希望#tools_hidden 变得可见并从 top:0% 平滑地移动到 top: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>