CSS动画@-webkit-keyframes
@-webkit-keyframes：以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。
display: inline-block; 行内块元素，不会产生错位
-webkit-animation-timing-function: linear; 线性过度
-webkit-animation-iteration-count: infinite; 设置循环播放次数：无限次
1 <!DOCTYPE html>
2 <html >
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 .div1 {
8 width: 200px;height: 200px;background-color: #ffc602;
9 margin-top: 100px;
10 display: inline-block;
11
12 }
13 @-webkit-keyframes mycolor1{
14 0%{
15 background-color: #ffc602
16 }
17 20%{
18 background-color: #1363bc;
19 height:250px
20 }
21 40%{
22 background-color: #cf0fff;
23 height:300px
24 }
25 60%{
26 background-color: #810977;
27 height:350px
28 }
29 80%{
30 background-color: #c91f10;
31 height:400px
32 }
33 100%{
34 background-color: #ffc602;
35 height:450px
36 }
37
38 }
39 .div1:hover{
40 -webkit-animation-name: mycolor1;
41 -webkit-animation-duration: 1s;
42 -webkit-animation-timing-function: linear;
43 -webkit-animation-iteration-count: infinite;
44 }
45 .div2{
46 width: 200px;height: 200px;background-color: #ffc602;
47 margin-top: 100px;
48 display: inline-block;
49
50 }
51 @-webkit-keyframes mycolor{
52 0%{
53 background-color: #ffc602
54 }
55 20%{
56 background-color: #1363bc;
57 -webkit-transform: translateY(-10px);
58 height: 210px;
59 }
60 40%{
61 background-color: #cf0fff;
62 -webkit-transform: translateY(-20px);
63 height: 220px
64 }
65 60%{
66 background-color: #810977;
67 -webkit-transform: translateY(-30px);
68 height: 230px
69 }
70 80%{
71 background-color: #c91f10;
72 -webkit-transform: translateY(-40px);
73 height: 240px
74 }
75 100%{
76 background-color: #ffc602;
77 -webkit-transform: translateY(-50px);
78 height: 250px
79 }
80
81 }
82 .div2:hover{
83 -webkit-animation-name: mycolor;
84 -webkit-animation-duration: 1s;
85 -webkit-animation-timing-function: linear;
86 -webkit-animation-iteration-count: infinite;
87 }
88 .div3{
89 height: 40px;width: 40px;background-color: #08446d;
90 display: inline-block;
91 }
92 .div3:hover{
93
94 }
95 </style>
96 </head>
97 <body>
98 <div class="div1"></div>
99 <div class="div2"></div>
100 <div class="div3"></div>
101
102 </body>
103 </html>@keyframes(关键帧)作为CSS3动画的一部分，其该紧跟一个标识符(由开发者自定)，此标识符将在其他CSS代码中引用。在@keyframes和标识符之后，就是一系列的动画规则(就像普通的CSS代码中声明的style规则)了。这一系列动画规则用大括号括起来隔开，然后再嵌在@keyframes之后的大括号里，类似其他@语法规则。
- 上一篇 »CSS3 @keyframes 规则
- 下一篇 »CSS3动画设置后台登录页背景切换图片
