@keyframes
规则用于创建动画。
@keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果
@keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
animation
animation 属性是一个简写属性，用于设置动画属性：
立即学习“前端免费学习笔记（深入）”；
侧边栏实现
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>
