CSS3的过度模块挺好用的，可以让一个属性在两个状态之间移动的动画。
transform设置形状
- translate
- scale
- rotate
- skew 倾斜
Transition
Transition是一种直观上的效果，让DOM元素的某个属性在固定时间内从一旧值到一新值。
浏览器支持
Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
用法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
|
transition-timing-function
既然是动画，那么就有动画的运行速率，不同的速度会产生不同的结果，以下是可取值。
ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
简写
简写的 transition 属性：
1
| transition: transition-property transition-duration transition-timing-function transition-delay
|
关键帧
1
2
3
4
5
| @keyframes 'name' {
keyframe {
property: value;
}
}
|
实例
匀速向下移动:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| @keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari 和 Chrome */
{
from {top:0px;}
to {top:200px;}
}
@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}
|
以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。
在一个动画中添加多个 keyframe 选择器：
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
| @keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-webkit-keyframes mymove /* Safari 和 Chrome */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-o-keyframes mymove /* Opera */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}
|
当然还可以添加这些动画属性
名称：animation-name
持续时间：animation-duration
计时函数：animation-timing-function
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out
延迟：animation-delay
迭代次数：animation-iteration-count
animation-iteration-count是用来指定元素播放动画的循环次数，其可以取值为数字，其默认值为“1”；infinite为无限次数循环。
播放状态：animation-play-state
其主要有两个值，running和paused