@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：规定对象动画时间之外的状态
侧边栏实现
1 /* 动画定义 */ 2 @-webkit-keyframes move_right { 3 from { 4 opacity: 0; 5 } 6 to { 7 opacity: 1; 8 -webkit-transform: translateX(120px); 9 transform: translateX(120px); 10 } 11 } 12 @keyframes move_right { 13 from { 14 opacity: 0; 15 } 16 to { 17 opacity: 1; 18 -webkit-transform: translateX(120px); 19 transform: translateX(120px); 20 } 21 } 22 @-webkit-keyframes move_left { 23 from { 24 opacity: 1; 25 } 26 to { 27 opacity: 0; 28 -webkit-transform: translateX(-120px); 29 transform: translateX(-120px); 30 } 31 } 32 @keyframes move_left { 33 from { 34 opacity: 1; 35 } 36 to { 37 opacity: 0; 38 -webkit-transform: translateX(-120px); 39 transform: translateX(-120px); 40 } 41 } 42 @-webkit-keyframes move_up { 43 from { 44 opacity: 0; 45 } 46 to { 47 opacity: 1; 48 -webkit-transform: translateY(-250px); 49 transform: translateY(-250px); 50 } 51 } 52 @keyframes move_up { 53 from { 54 opacity: 0; 55 } 56 to { 57 opacity: 1; 58 -webkit-transform: translateY(-250px); 59 transform: translateY(-250px); 60 } 61 }
1 /* 动画绑定 */ 2 .move_right { 3 -webkit-animation-name : move_right; 4 animation-name : move_right; 5 -webkit-animation-duration : 1s; 6 animation-duration : 1s; 7 -webkit-animation-iteration-count : 1; 8 animation-iteration-count : 1; 9 -webkit-animation-fill-mode : forwards; 10 animation-fill-mode : forwards; 11 } 12 .move_left { 13 -webkit-animation-name : move_left; 14 animation-name : move_left; 15 -webkit-animation-duration : 1s; 16 animation-duration : 1s; 17 -webkit-animation-iteration-count : 1; 18 animation-iteration-count : 1; 19 -webkit-animation-fill-mode : forwards; 20 animation-fill-mode : forwards; 21 } 22 .move_up { 23 -webkit-animation-name : move_up; 24 animation-name : move_up; 25 -webkit-animation-duration : 1s; 26 animation-duration : 1s; 27 -webkit-animation-iteration-count : 1; 28 animation-iteration-count : 1; 29 -webkit-animation-fill-mode : forwards; 30 animation-fill-mode : forwards; 31 } 32 .fadeIn { 33 -webkit-transform : translateX(120px); 34 transform : translateX(120px); 35 opacity: 1; 36 } 37 .fadeInUp { 38 -webkit-transform : translateY(-250px); 39 transform : translateY(-250px); 40 opacity: 1; 41 -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out; 42 transition :transform .2s ease-out, opacity .2s ease-out; 43 } 44 .fadeOutLeft { 45 -webkit-transform : translateX(-120px); 46 transform : translateX(-120px); 47 opacity: 0.0; 48 -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out; 49 transition :transform .2s ease-out, opacity .2s ease-out; 50 }
html
1 <!doctype html> 2 <html lang="en" class="fullHeight"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>demo</title> 6 <link rel="stylesheet" type="text/css" href="sidebar.css"> 7 </head> 8 <body class="fullHeight"> 9 <div class='sidebar fullHeight'>sidebar</div> 10 <div class="controller"> 11 <div> 12 <button onclick="fadeIn()">淡进</button> 13 <button onclick="fadeOut()">淡出</button> 14 </div> 15 <div> 16 <button onclick="fadeInUp()">向上淡进</button> 17 <button onclick="fadeOutLeft()">向左淡出</button> 18 </div> 19 </div> 20 <script src="sidebarEffects.js"></script> 21 </body> 22 </html>
加入JS
1 <script> 2 var sidebarEl = document.querySelector(".sidebar"); 3 4 function fadeIn (e) { 5 sidebarEl.className = 'sidebar fullHeight'; 6 sidebarEl.style.top = '0px'; 7 sidebarEl.style.left = '0px'; 8 sidebarEl.classList.add('move_right'); 9 } 10 function fadeOut (e) { 11 sidebarEl.className = 'sidebar fullHeight'; 12 sidebarEl.style.left = '120px'; 13 sidebarEl.classList.add('move_left'); 14 } 15 function fadeInUp(e) { 16 sidebarEl.className = 'sidebar fullHeight'; 17 sidebarEl.style.top = '250px'; 18 sidebarEl.style.left = '120px'; 19 sidebarEl.classList.add('move_up'); 20 21 } 22 function fadeOutLeft(e) { 23 sidebarEl.className = 'sidebar fullHeight'; 24 sidebarEl.style.top = '0px'; 25 sidebarEl.style.left = '120px'; 26 sidebarEl.classList.add('move_left'); 27 28 } 29 </script>