css3动画效果总结Word文档下载推荐.docx
《css3动画效果总结Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《css3动画效果总结Word文档下载推荐.docx（8页珍藏版）》请在冰豆网上搜索。
元素x方向逆时针倾斜角度a，y方向不变
skewY（b）;
元素y方向顺时针倾斜角度b，想方向不变
以上的参数均必须是以deg结尾的角度数或0，可为负数表示反向。
matrix
设置元素的变形矩阵，因为矩阵变形过于复杂，暂略。
origin
设置元素的悬挂点，用法包括：
transform-origin:
ab;
元素的悬挂点为（a,b）
元素的悬挂点即为它旋转和倾斜时的中心点。
取值中的a、b可以是长度值、以%结尾的百分比或者left、top、right、bottom四个值。
transition
transition-property
指定transition效果作用的CSS属性，其值是CSS属性名。
transition-duration
动画效果持续的时间，其值为以s结尾的秒数。
transition-timing-function
指定元素状态的变化速率函数，其取值基于贝赛尔曲线函数，详情如下所示：
transition-delay
动画效果推迟开始执行的时间，其值为以s结尾的秒数。
CSS3动画的生命周期如下图所示，从中可以清楚的看出duration和delay之间的关系：
animation
CSS3中真正的动画属性是animation，而前面的transform和transition都只是对DOM元素的变形或者是状态的过渡。
实际上，CSS3所支持的动画效果只是填充动画，也就是说先设定整个动画生命周期中的几个关键状态（key
frame，关键帧），然后动画将自行计算并模拟关键帧之间的过渡。
那么在设置animation的属性之前就必须先设定好关键帧了。
关键帧@keyframes的语法结构如下：
@keyframesNAME{
a%{
/*CSS属性*/
}
b%{
...
}
NAME表示动画的名字；
a%、b%表示以百分号结尾的百分数，用于设定该关键帧在动画生命周期中的位置；
百分数后面的{}中则需要写成该关键帧状态下CSS属性的值。
另外，如果同一个百分数值在@keyframes中出现多次，那么后出现的将覆盖先出现的；
并且关键帧在@keyframes中时无序的。
设置完关键帧后就可以继续设定animation了。
animation-name
指定选用的动画的名字，即keyframes中的NAME。
animation-duration
同transition-duration。
animation-timing-function
同transition-timing-function。
animation-delay
同transition-delay。
animation-iteration-count
设定动画执行的次数，其值可以是数字也可以是infinite（循环执行）。
animation-direction
设定动画执行的方向，其值可以是normal（正常顺序播放）或alternate（反向播放）。
前缀
因为CSS3还没有正式发布，所以各种浏览器对它的支持也不尽相同。
所以在设置CSS3属性（包括@开头的新属性）的时候通常需要对其添加浏览器标识的前缀，如-webkit-表示Webkit内核的浏览器Chrome和Safari，-moz-表示FireFox，-o-表示Opera。
无视IE吧，在IE上的实现通常还是要用到滤镜，而不是CSS3。
实例
下面的代码模拟了上述大部分的CSS3动画属性，由于只使用了–webkit-前缀，所以只能在Chrome或Safari下正常运行。
HTML代码：
[html]
viewplain
copy
1.<
!
DOCTYPE
html
PUBLIC
"
-//W3C//DTD
XHTML
1.0
Transitional//EN"
>
2.<
xmlns="
3.<
head>
4.<
meta
http-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
/>
5.<
title>
CSS3动画<
/title>
6.<
link
type="
text/css"
rel="
stylesheet"
href="
animation.css"
7.<
/head>
8.
9.<
body>
10.<
div
class="
rotate"
rotate<
/div>
11.<
scale"
scale<
12.<
translate"
translate<
13.<
skew"
skew<
14.<
origin"
origin<
15.<
single"
single
property<
16.<
whole"
whole
17.<
resume"
change
&
resume<
18.<
animation"
animation<
19.<
/body>
20.<
/html>
CSS代码：
animation.css
[css]
1.div
{
2.
width:
80px;
3.
height:
30px;
4.
line-height:
5.
text-align:
center;
6.
background:
#06F;
7.
color:
#fff;
font-family:
Arial,
Helvetica,
sans-serif;
9.
-webkit-border-radius:
10px;
10.
margin:
5px;
11.}
12.
13..rotate
14.
-webkit-transform:
rotate（0deg）;
15.}
16.
17..rotate:
hover
18.
rotate（90deg）;
19.}
20.
21..scale
22.
scale
（1）;
23.}
24.
25..scale:
26.
scale（1.5）;
27.}
28.
29..translate
30.
translate（0px,
0px）;
31.}
32.
33..translate:
34.
translate（50px,
50px）;
35.}
36.
37..skew
38.
skew（0）;
39.}
40.
41..skew:
42.
skewY（20deg）;
43.}
44.
45..origin
46.
-webkit-transform-origin:
top
left;
47.
rotate（0）;
48.}
49.
50..origin:
51.
rotate（45deg）;
52.}
53.
54..single
55.
150px;
56.}
57.
58..single:
59.
#f00;
60.
200px;
61.
100px;
62.
63.
-webkit-transition-property:
background;
64.
-webkit-transition-duration:
2s;
65.}
66.
67..whole
68.
69.}
70.
71..whole:
72.
73.
74.
75.
76.
77.}
78.
79..resume
80.
81.
82.}
83.
84..resume:
85.
86.
87.
88.
89.
90.}
91.
92..animation:
93.
-webkit-animation-name:
anim;
94.
-webkit-animation-duration:
95.
-webkit-animation-timing-function:
linear;
96.
-webkit-animation-direction:
alternate;
97.
-webkit-animation-iteration-count:
infinite;
98.}
99.
100.@-webkit-keyframes
anim
101.
0%
102.
103.
104.
105.
106.
}
107.
50%
108.
140px;
109.
65px;
110.
111.
#360;
112.
113.
100%
114.
115.
116.
117.
118.
119.}
升级会员 