一、前言
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
在 CSS3 中创建动画，需要学习 @keyframes 规则。@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
二、例子
下面我以自己博客文章的动画效果为例。
2.1 HTML 代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>双鱼的 CSS3 动画</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <article class="post"> <a href="#" rel="bookmark"> <figure> <img src="images/pisces-css3-keyframes.jpg" /> <figcaption> <h1>双鱼的 CSS3 动画</h1> <span>2015.03.23 , 0 只鱼</span> </figcaption> </figure> </a> </article> </body> </html> |
2.2 部分 CSS 代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
body{ background: none repeat scroll 0% 0% #fff; color: #333; font-family: 'Microsoft YaHei',Arial,Helvetica,sans-serif; margin: 0 auto; padding :0; width: 100%; } article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{ display: block; margin: 0; padding: 0; } h1,h2,h3,h4,h5,h6{ font-weight: normal; margin: 0; padding: 0; } .post{ height: 0; margin: 100px auto; overflow: hidden; position: relative; padding-bottom: 20%; width: 20%; } .post a{ display: block; } .post figure{ background: #fff; height: 100%; overflow: hidden; } .post img{ width: 100%; } .post figcaption{ background: #f2f2f2; bottom: 0; border-left: 1px solid #d7d7d7; left: 0; padding: 12px; position: absolute; right: 0; } .post figcaption:after{ bottom: 100%; border-bottom: 12px solid #f2f2f2; border-left: 12px solid transparent; border-right: 12px solid transparent; content: ''; height: 0; left: 50%; margin-left: -12px; position: absolute; width: 0; z-index: 1; } .post h1{ color: #000; font-size: 16px; line-height: 24px; } .post span{ color: #656565; display: block; font-size: 12px; font-weight: 500; line-height: 18px; text-transform: uppercase; } |
2.3 主要 CSS 代码
2.3.(1) 把 “OUT” 动画捆绑到 figcaption 元素的代码
|
1
2
3
4
5
|
.post figcaption{ -webkit-animation: OUT 2s ease backwards; -moz-animation: OUT 2s ease backwards; animation: OUT 2s ease backwards; } |
2.3.(2) 在 @keyframes 中的 CSS 样式代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
@keyframes OUT{ from{height: 100%;} to{height: 25%;} } /* Firefox */ @-moz-keyframes OUT{ from{height: 100%;} to{height: 25%;} } /* Safari 和 Chrome */ @-webkit-keyframes OUT{ from{height: 100%;} to{height: 25%;} } /* Opera */ @-o-keyframes OUT{ from{height: 100%;} to{height: 25%;} } |
2.3.(3) 补充（增加 :hover 选择器）CSS 代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 |
.post:hover figcaption{ -webkit-animation: IN 2s ease forwards; -moz-animation: IN 2s ease forwards; animation: IN 2s ease forwards; } @keyframes IN{ from{height: 25%;} to{height: 100%;} } /* Firefox */ @-moz-keyframes IN{ from{height: 25%;} to{height: 100%;} } /* Safari 和 Chrome */ @-webkit-keyframes IN{ from{height: 25%;} to{height: 100%;} } /* Opera */ @-o-keyframes OUT{ from{height: 25%;} to{height: 100%;} } |
三、总结
双鱼bizhongbio 没有详细讲解 @keyframes 规则和所有动画属性，只是举了一个 CSS3 动画实例。如果你想了解更多有关 CSS3 动画的知识，可以访问：CSS3 动画（http://www.w3school.com.cn/css3/css3_animation.asp）
1条评论
让“CSS3 动画”飞起来！