(一)CSS3动画应用 - CSS3 实现 侧边栏展开收起
2014-11-29 09:04
483 查看
@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
<!doctype html> <html lang="en" class="fullHeight"> <head> <meta charset="UTF-8"> <title>demo</title> <link rel="stylesheet" type="text/css" href="sidebar.css"> </head> <body class="fullHeight"> <div class='sidebar fullHeight'>sidebar</div> <div class="controller"> <div> <button onclick="fadeIn()">淡进</button> <button onclick="fadeOut()">淡出</button> </div> <div> <button onclick="fadeInUp()">向上淡进</button> <button onclick="fadeOutLeft()">向左淡出</button> </div> </div> <script src="sidebarEffects.js"></script> </body> </html>
View Code
加入JS
<script> 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'); } </script>
相关文章推荐
- CSS3 实现侧边栏展开收起动画
- css3实现手机菜单展开收起动画
- 7款纯CSS3实现的炫酷动画应用
- 应用 CSS3 动画实现12种风格的通知提示
- 7款纯CSS3实现的炫酷动画应用|慕课网只学有用的!
- css3实现扁平化风格APP应用图标时钟动画
- vue.js 实现点击展开收起动画效果
- css3 动画应用 animations 和transtions transform在加上JavaScript 可以实现硬件加速动画。
- 纯CSS3实现移动端展开和收起效果
- 7款纯CSS3实现的炫酷动画应用
- Javascript应用--实现菜单列表展开闭合效果
- Wipe In and Wipe Out 抹进、抹出(动画显示、动画隐藏)(展开、折叠)(拉下、收起)
- 实现展开收起DIV的功能
- 用纯CSS3实现Path华丽动画
- 用纯CSS3实现Path华丽动画
- QQ音乐页面css3动画的应用
- HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
- CSS3+PNG实现GIF动画效果
- 在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
- delphi 实现窗口动画效果 Animatewindow 的应用