内容包括：

• 概述
• CSS3变形
• CSS3过渡
• CSS3动画
• 总结

##概述

##CSS3 变形 #####1.1 CSS3变形简介

CSS3变形是一些效果的集合，比如平移、旋转、缩放、倾斜效果等，每个效果被称作变形函数，操作元素进行相应的变化。

CSS3变形允许动态的控制元素，结合不同的变形函数产生复杂的动画效果，也可以结合CSS3的transition和动画的keyframe产生更加多变的动画效果。

下面例举了变形函数：

浏览器兼容性问题

虽然CSS3变形得到了主流浏览器较好地支持，但每个浏览器支持的程度不同，实际使用中要添加浏览器私有属性前缀。这里顺便就总结一下浏览器私有前缀。

浏览器私有前缀

待总结 #####1.2 CSS变形属性 1.2.1 transform属性

参数含义：none表示元素不变形，transform-function即变形函数

transform-function 表格列出变形函数

1.2.2 transform-origin属性

属性作用：指定元素中心点位置，即重置元素的原点。

基本语法：transform-origin: 参数略（可以是%、em、px等具体值，也可以是center等关键词）

注意点：旋转、缩放和倾斜变形可以按照重置原定进行，但平移变形始终按照元素中心点进行位移。

1.2.3 transform-style属性

参数含义：flat表示所有子元素在2d平面呈现，preserve-3d则表示在3d空间呈现

1.2.4 perspective属性

属性作用：设置查看者的位置，将可视内容映射到一个视锥上，然后偷到一个2D视平面上

参数说明：none表示无限视距，长度值越大，角度越远，长度值越小，越接近我们所看到得3D效果

此外，还有一个perspective()函数，它与perspective属性作用相同，区别在于perspective属性应用在变形元素的共同父元素上，而perspective()函数作用在当前元素。

用法：

.box {
	perspective: 600px;
}
.box {
	transform: perspective(600px);
}

1.2.5 perspective-origin属性

属性作用：决定perspective属性的源点角度

1.2.5 backface-visibility属性

属性作用：决定元素旋转背面是否可见

参数说明：visible表示背面可见，hidden表示背面不可见（扑克牌翻牌效果）

#####1.3 CSS3 2D变形

1.3.1 2D位移

参数说明：tx表示x轴偏移量，ty表示y轴偏移量，x轴tx为正表示向右

1.3.2 2D缩放

参数说明：使用方法跟translate相似

1.3.3 2D旋转

基本语法：rotate(a)

参数说明：a代表角度值，为正时相对元素中心顺时针旋转，为负时相对元素中心逆时针旋转，参数单位deg

1.3.4 2D倾斜

参数说明：ax指定元素水平方向倾斜的角度，ay指定元素竖直方向倾斜的角度。

1.3.5 2D矩阵

基本语法：matrix(参数)

参数说明：以上的变形函数可以用matrix函数表示，具体用法略

#####1.4 CSS3 3D变形

1.4.1 3D位移

1.4.2 3D缩放

1.4.3 3D旋转

1.4.4 3D矩阵

基本语法： 略

#####1.5 多重变形 多个变形函数之间用空格隔开

#####demo练习

待定

##CSS3 过渡

#####2.1 CSS3过渡简介

CSS3中得transition允许CSS元素值在一定的时间区间内平滑地过渡。

只要目标元素属性更改，浏览器就会应用过渡，除了使用js出发动作外，CSS中也可以通过一些伪类触发，比如：:hober,:focus,:active,:target,:checked等。

使用CSS创建过渡的步骤：

1. 在默认样式中声明元素的初始状态样式
2. 声明过渡元素最终状态样式，比如悬浮样式
3. 在默认样式中通过添加过渡函数，添加不同的样式

浏览器兼容性：跟CSS3变形一样实际使用时需要添加浏览器私有前缀

transition属性是一个复合属性，包含四个属性值transition-property、transition-duration、transition-timing-function、transition-delay。

一般的属性设置顺序：

transition: all 1s ease-in-out .5s;

transition: 过渡属性 过渡所需时间 过渡动画函数 过渡延迟时间

#####2.2 属性详解

2.2.1 指定过渡属性transition-property

能够完成过渡的属性：具有过渡的中间值

• 颜色属性
• 具有长度值
• integer
• number浮点数值
• 变形系列属性
• rectangle
• visiblity
• 阴影
• 渐变
• SVG

2.2.2 指定过渡所需时间transition-duration

2.2.3 指定过渡函数transition-timing-function

参数：ease, linear, ease-in, ease-out, ease-in-out

三次贝瑟尔曲线：定义cubic-bezier(P0,P1,P2,P3)

transition-timing-function: cubic-bezier(.85,0,1,1)

2.2.4 指定过渡延迟时间transition-delay

2.25 多个CSS3过渡效果

用逗号分隔要多度的各个CSS属性

#####2.3 CSS3触发过渡

2.3.1 为元素触发

:active, :focus, :checked

2.3.2 媒介查询触发

2.3.3 Js触发

tips：事件通常由js触发，简单动画和过渡用css触发

#####2.4 CSS3过渡技巧 未总结

##CSS3 动画 #####3.1 CSS3动画简介

CSS3通过animation实现动画和transition实现动画非常相似，都是通过改变元素的属性值实现动画效果，区别在于transition属性只能指定属性的初始状态和结束状态，然后在两个状态之间进行平滑地过渡。而animation实现动画效果主要由两部分组成：

• 通过类似flash动画中的关键帧来声明一个动画
• 在animation属性中调用关键帧声明的动画，从而实现更为复杂的动画效果

animation同transition一样是一个复合属性，animation具有8个子属性：

1. animation-name: 指定一个关键帧动画的名字，必须对应一个@keyframe规则
2. animation-duration: 设置动画播放所需时间，一般以秒为单位
3. animation-timing-function: 设置动画的播放方式
4. animation-delay: 指定动画开始时间，一般以秒为单位
5. animation-iteration-count: 指定动画播放的循环次数
6. animation-direction: 指定动画播放方向
7. animation-play-state: 控制动画的播放状态
8. animation-fill-mode: 设置动画时间外属性

多个动画属性应用到同一个元素上时用分号分隔开

#####3.2 关键帧

关键帧语法：

@keyframes animation-name {
	0%{
		/*css样式*/
	}
	50%{
		/*css样式*/
	}
	100%{
		/*css样式*/
	}
}

#####3.3 CSS中为元素应用动画

3.3.1 使用@keyframes声明动画

@keyframes wobble {
	0%{
		/*css样式*/
	}
	50%{
		/*css样式*/
	}
	100%{
		/*css样式*/
	}
}

3.3.2 调用@keyframes声明的动画

.demo{
	animation: wobble .2s ease-in;
}

#####CSS3动画子属性详解

1. animation-name: 指定一个关键帧动画的名字，必须对应一个@keyframe规则
2. animation-duration: 设置动画播放所需时间，一般以秒为单位
3. animation-timing-function: 设置动画的播放方式
4. animation-delay: 指定动画开始时间，一般以秒为单位

5. animation-iteration-count: number

   infinite;

6. animation-direction: normal

   alternate ;

7. animation-play-state: running

   paused;

8. animation-fill-mode: none

   forwards

   backwards

   both