CSS动画问题：sidebar点击触发前无法隐藏至画布外

你遇到的核心问题是display: none会让浏览器跳过元素的渲染状态，自然没法触发动画。换个思路，不用display属性，直接把侧边栏初始定位到可视区域外面，再通过复选框状态触发动画就行。

方案一：用transition实现平滑滑入（更简洁） #

修改后的CSS代码如下：

/* 初始状态：把侧边栏定位到左侧画布外，隐藏起来 */
input+label+#sidebar {
  position: fixed;
  top: 0;
  left: -100%; /* 用负百分比适配不同屏幕宽度 */
  width: 300px; /* 给侧边栏设固定宽度，避免占满屏幕 */
  height: 100%;
  background: #fff;
  transition: left 0.5s ease; /* 过渡动画，平滑滑入 */
}

/* 复选框选中时，侧边栏滑入可视区域 */
input:checked+label+#sidebar {
  left: 0;
}

方案二：用animation实现（贴合你原有的写法） #

如果坚持用animation，这么改：

input+label+#sidebar {
  position: fixed;
  top: 0;
  left: -100%;
  width: 300px;
  height: 100%;
  background: #fff;
}

input:checked+label+#sidebar {
  animation: slideIn 1s forwards; /* forwards让动画结束后保持最终位置 */
}

@keyframes slideIn {
  from {
    left: -100%;
  }
  to {
    left: 0;
  }
}

关键注意点 #

• 用left: -100%（或根据布局调整为right）代替display: none，让元素始终处于浏览器渲染状态，才能触发动画。
• 如果用animation，必须加animation-fill-mode: forwards，否则动画结束后元素会跳回初始隐藏位置。
• 给侧边栏设置背景色和固定宽度，避免和页面内容重叠或显示异常。

内容的提问来源于stack exchange，提问作者user19674442