这篇文章主要介绍了如何使用css3 实现侧边栏展开收起动画，并附上了示例代码，非常的详细，推荐给需要的小伙伴。
@keyframes
规则用于创建动画。
@keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果
@keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
立即学习“前端免费学习笔记（深入）”；
规定动画的名称
规定动画的时长
animation
animation 属性是一个简写属性，用于设置动画属性：
animation-name：规定 @keyframes 动画的名称。
animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function：规定动画的速度曲线。默认是 “ease”。
animation-delay：规定动画何时开始。默认是 0
animation-iteration-count：规定动画被播放的次数。默认是 1。
animation-direction：规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-fill-mode：规定对象动画时间之外的状态
侧边栏实现
/* 动画定义 */@-webkit-keyframes move_right { from { opacity: 0; } to { opacity: 1; -webkit-transform: translateX(120px); transform: translateX(120px); }}@keyframes move_right { from { opacity: 0; } to { opacity: 1; -webkit-transform: translateX(120px); transform: translateX(120px); }}@-webkit-keyframes move_left { from { opacity: 1; } to { opacity: 0; -webkit-transform: translateX(-120px); transform: translateX(-120px); }}@keyframes move_left { from { opacity: 1; } to { opacity: 0; -webkit-transform: translateX(-120px); transform: translateX(-120px); }}@-webkit-keyframes move_up { from { opacity: 0; } to { opacity: 1; -webkit-transform: translateY(-250px); transform: translateY(-250px); }}@keyframes move_up { from { opacity: 0; } to { opacity: 1; -webkit-transform: translateY(-250px); transform: translateY(-250px); }}
登录后复制
/* 动画绑定 */ .move_right { -webkit-animation-name : move_right; animation-name : move_right; -webkit-animation-duration : 1s; animation-duration : 1s; -webkit-animation-iteration-count : 1; animation-iteration-count : 1; -webkit-animation-fill-mode : forwards; animation-fill-mode : forwards; } .move_left { -webkit-animation-name : move_left; animation-name : move_left; -webkit-animation-duration : 1s; animation-duration : 1s; -webkit-animation-iteration-count : 1; animation-iteration-count : 1; -webkit-animation-fill-mode : forwards; animation-fill-mode : forwards; } .move_up { -webkit-animation-name : move_up; animation-name : move_up; -webkit-animation-duration : 1s; animation-duration : 1s; -webkit-animation-iteration-count : 1; animation-iteration-count : 1; -webkit-animation-fill-mode : forwards; animation-fill-mode : forwards; } .fadeIn { -webkit-transform : translateX(120px); transform : translateX(120px); opacity: 1; } .fadeInUp { -webkit-transform : translateY(-250px); transform : translateY(-250px); opacity: 1; -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out; transition :transform .2s ease-out, opacity .2s ease-out; } .fadeOutLeft { -webkit-transform : translateX(-120px); transform : translateX(-120px); opacity: 0.0; -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out; transition :transform .2s ease-out, opacity .2s ease-out; }
登录后复制
html
nbsp;html>demo sidebar
登录后复制
加入JS
var sidebarEl = document.querySelector(".sidebar"); function fadeIn (e) { sidebarEl.className = 'sidebar fullHeight'; sidebarEl.style.top = '0px'; sidebarEl.style.left = '0px'; sidebarEl.classList.add('move_right'); } function fadeOut (e) { sidebarEl.className = 'sidebar fullHeight'; sidebarEl.style.left = '120px'; sidebarEl.classList.add('move_left'); } function fadeInUp(e) { sidebarEl.className = 'sidebar fullHeight'; sidebarEl.style.top = '250px'; sidebarEl.style.left = '120px'; sidebarEl.classList.add('move_up'); } function fadeOutLeft(e) { sidebarEl.className = 'sidebar fullHeight'; sidebarEl.style.top = '0px'; sidebarEl.style.left = '120px'; sidebarEl.classList.add('move_left'); }
登录后复制
以上就是使用CSS3制作侧边栏动画效果的全部内容和代码了，小伙伴们根据自己的项目需求来改善美化下就可以了哦。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
如何用css3绘制一个圆的loading转圈动画
如何设置CSS 文本字体颜色
以上就是CSS3 实现侧边栏展开收起动画的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2897082.html
