@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>
时间： 2024-07-29 07:53:50