CSS Animations

Appearance

抽屉面板 Modal Drawer ​

抽屉面板从视口右侧滑入，常用于设置面板或详情侧边栏。

实时预览 ​

设置

这里是抽屉内容区域。

可以放置表单、设置项等。

代码 ​

css
.drawer-panel {
  position: absolute; right: 0; top: 0;
  width: 300px; height: 100%;
  background: #1a1a2e;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.drawer-panel.open { transform: translateX(0); }
.drawer-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
.drawer-overlay.show { opacity: 1; pointer-events: auto; }
html
<div class="drawer-overlay"></div>
<div class="drawer-panel">
  <div class="drawer-header">
    <span>标题</span>
    <button class="drawer-close">✕</button>
  </div>
  <div class="drawer-body">内容</div>
</div>

纯 CSS 实现的抽屉面板弹窗动画——通过伪类选择器和过渡让模态框/对话框有平滑的进入和退出动画。适用于确认对话框、图片灯箱、侧边栏面板等场景。

快速使用 ​

  1. 复制 CSS 代码到你的样式文件中
  2. 将弹窗 HTML 结构粘贴到页面底部（checkbox hack 方案）或用 JS 控制显示
  3. 弹窗打开时给 body 加 overflow: hidden 防止背景滚动
  4. 调整弹窗大小、位置和动画时长

使用场景 ​

  • 确认对话框：缩放弹出+背景模糊让用户聚焦于确认操作
  • 图片/视频灯箱：从缩略图位置放大过渡到全屏预览
  • 侧边栏/抽屉面板：从屏幕边缘滑入，适合移动端的筛选和菜单
  • 登录/注册弹窗：顶部滑入+背景遮罩，不打断用户浏览上下文

常见问题 ​

Q: 弹窗动画如何防止背景滚动？ A: 弹窗打开时给 body 加 overflow: hidden（或 position: fixed + 记录 scrollY）。纯 CSS 方案无法控制 body 滚动，所以弹窗动画通常需要少量 JS 配合。

Q: 弹窗关闭时动画如何反转播放？ A: 关闭时先触发退出动画（如 opacity: 1→0），等 transitionend 事件后再移除 DOM 或设置 display: none。不要同时改变 display 和播放动画——display 变化会跳过过渡。

Q: 弹窗动画的焦点管理怎么做？ A: 打开弹窗时用 JS focus() 将焦点移到弹窗内第一个可聚焦元素，关闭后把焦点还给触发按钮。配合 aria-modal="true" 和 role="dialog" 满足屏幕阅读器无障碍要求。

浏览器兼容性 ​

浏览器兼容性
Chrome / Edge✅ 完全支持
Firefox✅ 完全支持
Safari✅ 完全支持
移动端浏览器✅ 完全支持
IE 11⚠️ flex 布局需要降级处理

使用说明 ​

属性说明
transform: translateX(100%)面板隐藏在视口右侧外
cubic-bezier(0.32, 0.72, 0, 1)先快后慢的减速缓动
right: 0; top: 0定位在容器右侧边缘
width: 300px可调整抽屉宽度

📎 相关动画推荐

以下更多 CSS 弹窗动画 等你探索——每个都支持在线预览和一键复制代码。

模糊遮罩弹跳弹窗淡入模态框缩放弹出顶部滑入