CSS3动画、2D、3D转换

我是图片

CSS3过渡效果

CSS3的过渡效果就是一个元素的样式改变时增加的一个动画过程。

transition属性

属性 描述
transition-property 设置过渡的CSS属性
transition-duration 设置过渡的时间
transition-duration 设置过渡的时间
transition-timing-function 过渡效果的速度曲线
transition-delay 过渡的延迟时间

transition-timing-function属性值

属性 描述
linear 匀速运动
ease 逐渐变慢（默认）
ease-in 先慢后快
ease-out 先快后慢
ease-in-out 先慢后快再慢

cubic-Bezier (n,n,n,n) 贝塞尔曲线

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

div{
	width: 100px;
	height: 100px;
	background: red;
	transition-property: width,height,background;
	transition-duration: 1s,1s,1s;
	transition-delay: 0s,1s,2s;
	transition-timing-function: cubic-bezier(.49,-0.21,.54,1.22);
	/*简写*/
	transition:width 1s cubic-bezier(.49,-0.21,.54,1.22),
	height 1s 1s,
	background 1s 2s;
}
div:hover{
	width: 400px;
	height: 400px;
	background: blue;
}

CSS3动画效果

创建动画

使用@keyframes创建动画,通过from..to或百分比设置动画关键帧。

1
2
3
4
5
6
7
8
9
10
11
@keyframes move
{
from {top:0px;}
to {top:100px;}
}
@keyframes move
{
0%   {top:0px;}
50%  {top:50px;}
100% {top:100px;}
}

animation属性

属性 描述
animation-name 动画属性名
animation-duration 设置动画的时间
animation-timing-function 动画的速度曲线
animation-delay 动画的延迟时间
animation-iteration-count 动画执行次数，infinite为无限
animation-direction alternate逆向执行动画
animation-play-state 设置动画运行(running)或暂停(paused)
animation-fill-mode 动画时间之外的状态

animation-fill-mode属性值

属性 描述
none 默认行为
forwards 当动画完成后，保持最后一个属性值。
backwards 在延迟时间时，应用动画第一个属性值。
both forwards、backwards。

结构

1
2
3
<div class="wrap">
	<div></div>
</div>

样式

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
.wrap{
	width: 400px;
	height: 400px;
	border: 5px solid black;
	position: relative;
}
.wrap div{
	width: 100px;
	height: 100px;
	background: red;
	position: absolute;
	left: 0;
	/*transition: 1s;*/
	animation: move 2s linear 0s;
	animation-iteration-count: 2;
	animation-direction: alternate;
	
}
.wrap:hover div{
	animation-play-state: paused;
}
@keyframes move{
	0%{
		left: 0;top:0;
	}
	25%{
		left:300px;top: 0px;
	}
	50%{
		left:300px;top: 300px;
	}
	75%{
		left:0px;top: 300px;
	}
	100%{
		left: 0px;top: 0;
	}
}

CSS3-2D/3D转换

2D/3D 转换属性

属性 描述
transform 元素的 2D 或 3D 转换
transform-origin 改变被转换元素的位置
transform-style 可设置元素在 3D 空间中显示。
perspective 设置元素的3D效果。
perspective-origin 3D元素的位置。
backface-visibility 设置元素背面是否可见。

2D转换方法

方法 描述
translate(x,y) 元素位置移动
rotate(deg) 元素旋转
scale(x,y) 元素放大缩小
skew(x,y) 元素倾斜
matrix(n,n,n,n,n,n) 把所有转换方法组合在一起

3D转换方法

方法 描述
translate3d(x,y,z) 元素位置移动
rotate3d(x,y,z,deg) 元素旋转
scale3d(x,y,z) 元素放大缩小

###例子

translate方法

结构

1
2
3
<div class="wrap">
	<div></div>
</div>

样式

1
2
3
4
5
6
7
8
9
10
11
.wrap{
	width: 100px;
	height: 100px;
	border:5px dashed black;
}
.wrap div{
	width: 100px;
	height: 100px;
	background: red;
	transform: translate(105px,50px);
}

效果

我是图片

scale方法

结构

1
2
3
<div class="wrap">
	<div></div>
</div>

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
.wrap{
	width: 100px;
	height: 100px;
	border:5px dashed black;
	margin: 50px auto;
}
.wrap div{
	width: 100px;
	height: 100px;
	background: red;
	opacity: 0.5;
	transform: scale(1.5,1.5);
}

效果

我是图片

rotate方法

结构

1
2
3
4
5
<div class="wrap">
	<div class="d1">rotateX</div>
	<div class="d2">rotateY</div>
	<div class="d3">rotateZ</div>
</div>

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.wrap{
	/*设置3d视角距离*/
	perspective:1000px;
	/*设置为3d模式*/
	transform-style: preserve-3d;
	width: 500px;
	margin: 50px auto;
}
.wrap div{
	width: 100px;
	height: 100px;
	background: red;
	float: left;
	margin: 0 10px;
	transition: 1s;
}
.d1{transform: rotateX(45deg);}
.d2{transform: rotateY(45deg);}
.d3{transform: rotateZ(45deg);}
.d1:hover{transform: rotateX(90deg);}
.d2:hover{transform: rotateY(90deg);}
.d3:hover{transform: rotateZ(90deg);}

效果

我是图片

skew方法

结构

1
2
<div class="d1">skewX</div>
<div class="d2">skewY</div>

样式

1
2
3
4
5
6
7
8
9
div{
	width: 100px;
	height: 100px;
	background: red;
	float: left;
	margin: 50px 30px;
}
.d1{transform: skewX(30deg);}
.d2{transform: skewY(30deg);}

效果

我是图片

3D动画

结构

1
2
3
<div class="wrap">
	<div ></div>
</div>

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.wrap{
	/*设置3d视角距离*/
	perspective:1000px;
	/*设置为3d模式*/
	transform-style: preserve-3d;
	width: 200px;
	height: 300px;
	border: 5px solid black;
	margin: 50px auto;
}
.wrap div{
	width: 200px;
	height: 300px;
	background: red;
	transform: translate3d(0px,0px,200px);
	animation: move2 10s linear infinite;
}
@keyframes move{
	from{transform: rotateY(0deg) translate3d(0px,0px,200px)}
	to{transform: rotateY(360deg) translate3d(0px,0px,200px)}
}

效果

我是图片