使用CSS transition控制侧边栏宽度变化实现展开收缩，通过JavaScript切换类名触发动画，transition比animation更适用于此类交互效果。
要实现侧边栏的展开和收缩效果，使用 CSS Animation 是一种简洁高效的方式。你可以通过控制侧边栏的宽度或使用 `transform` 配合 `overflow` 来实现平滑动画。下面是一个实用且易于理解的实现方法。
1. 基础 HTML 结构
首先定义一个包含按钮和侧边栏的基本结构：
2. 样式与动画定义
使用 CSS 定义侧边栏默认隐藏，并通过类名触发展开动画：
.sidebar { width: 0; height: 100vh; background-color: #333; color: white; overflow: hidden; position: fixed; top: 0; left: 0; transition: width 0.3s ease;}.sidebar.open { width: 200px;}
说明：这里没有用 @keyframes 而是使用了 transition，因为它更适合状态切换（展开/收起）。如果你坚持使用 animation，也可以这样写：
立即学习“前端免费学习笔记（深入）”；
音疯
音疯是昆仑万维推出的一个AI音乐创作平台，每日可以免费生成6首歌曲。
146 查看详情
@keyframes slideIn { from { width: 0; } to { width: 200px; }}@keyframes slideOut { from { width: 200px; } to { width: 0; }}.sidebar.open { animation: slideIn 0.3s forwards;}.sidebar.close { animation: slideOut 0.3s forwards;}
注意： 使用 animation 时需动态添加/移除类名，并处理结束后的状态（forwards 保持最终帧）。
3. JavaScript 控制开关
用简单脚本切换类名：
document.getElementById('toggleBtn').addEventListener('click', function() { document.querySelector('.sidebar').classList.toggle('open');});
建议： 如果用 transition，逻辑更直观；如果追求复杂动画节奏（如弹性、延迟段），再考虑 @keyframes。
4. 可选优化项
添加遮罩层：点击遮罩关闭侧边栏 移动端适配：媒体查询调整宽度 内容淡入配合：文字 opacity 从 0 到 1 同步出现 使用 flex 或 grid 布局避免主内容被遮挡
基本上就这些。核心是控制宽度变化 + 过渡动画，transition 更适合这类交互，animation 更适合固定节奏播放。按需选择即可。
以上就是如何通过css animation制作侧边栏展开收缩效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1054749.html
微信扫一扫 
支付宝扫一扫 
