CSS3过渡属性
transition属性表示允许css的属性在一定的时间区间平滑的过度。
这种效果可以在鼠标划过、获得焦点、点击或对元素任何改变中触发，并圆滑的改变CSS的属性值
需要注意的是过度属性需要触发事件，过度属性写在发生变形的元素的样式里，尽量写在元素的初始状态里，以保证元素在返回初始状态时也有过渡
transition-property ：检索或设置对象中的参与过度的属性，属性值可以单独设置，也可以设置多个（width,height），还可以设置为all（默认值）
transition-duration ：检索或设置过度的持续时间，单位是（s/ms）
transition-delay ：设置延迟过渡时间
属性值为正值是延迟执行过度效果
属性为负值是提前执行过渡效果
transition-timng-function ：设置对象中过度的动画类型
属性值如下：
- linear 匀速
- ease（默认值） 逐渐慢下来
- ease-in 加速
- ease-out 减速
- ease-in-out 先加速后减速
过渡的动画类型也可以通过函数cubic-bezier( , , , )自定义，可以在网站http://cubic-bezier.com/上定义出自己想要的过渡的动画类型效果
CSS3 动画属性animation
animation与transition的相同点和不同点
相同点：都是随时间改变元素的属性值
不同点：transition需要触发一个事件
animaton在不需要触发的情况下可以显示的随时间变化而
改变的css属性值 需要明确的动画属性
animation的动画效果是通过关键帧来实现的
初始效果—动画帧—动画帧—初始效果
定义关键帧:
@keyframes mymove{}
语法
@keyframes mymove{
from{} 初始状态
to{} 结束状态
}
@keyframes mymove{
0%{初始状态}
25%{}
50%{}
100%{结束状态}}
动画属性：
1、animation-name:检索或设置动画名称
2、animation-duration:设置动画持续时间
单位：s/ms
3、animation-dalay ：设置动画的延迟时间
4、animation-timing-function
检索或设置对象动画的过渡类型
linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0,0.58, 1.0)
step-start:马上跳到动画每一结束桢的状态
(实现逐帧动画效果)
5、animation-iteration-count 循环次数
infinite 无限循环
number: 2 3
6、animation-direction 设置动画在循环中是否反方向运动
normal
reverse:反方向
alternate:动画先正常运行再反方向运行，并持续交替运行
0%–100%–0%
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
100%–0%–100%
7、animation-fill-mode：规定动画播放之前或之后的效果
none 让0%（初始状态）在延迟后生效
backwards 让0%（初始状态）在延迟前生效
forwards 动画结束后，就停留在结束位置
both 效果 = backwards + foewards
8、animation-play-state 设置动画的状态
running:运动
paused: 暂停
animation-play-state:paused; 当鼠标经过时动画停止，
鼠标移开动画继续执行
2D 功能函数
语法：
tranform：函数名称（参数）；
1、
2D位移 translate()
translate（tx） 当参数设置一个值的时候，代表水平方向的位移
translate(tx,ty) 第一个值代表水平方向的距离，第二个值代表垂直方向的距离
translateX(tx) 指定方向设置位移 沿X轴移动
translateY(ty) 指定方向设置位移 沿Y轴移动
当属性值为正值时 代表向右或向下移动
但属性值为负值是 代表向左或向上移动
属性值可以用 px / %（百分比大小的参照物是元素的宽高）translate()位移的效果和定位里的relative是类似的，都是在当前位置进行位移，对其它元素没有影响，原来的位置会保留
2、
2D缩放 scale()
属性值代表的是倍数，默认值是1，可以为负，但很少用
scale(var1) 水平和数值
scale(var1, var2) 水平 垂直
scaleX() 水平方向缩放比例
scaleY() 垂直方向缩放比例
3、
2D 旋转 rotate() 沿着中心点旋转
属性值以度（deg）为单位
只能放一个属性值
正值：顺时针旋转
负值：逆时针旋转
rotateX() 沿X轴旋转
rotateY() 沿Y轴旋转
4、
2D倾斜 skew()
属性值的单位是度（deg）
skew(var1) 一个值代表沿x轴倾斜
skew(var1, var2) var1沿x轴倾斜，var2沿y轴倾斜
属性值为正值：向左/向上倾斜
属性值为负值：向右/向下倾斜
skewX()
skewY()
说明：元素通过transfrom进行变形时，都是对其它元素不产生影响的，不脱离文档流，变形时元素默认情况下都是沿着中心点去变形
5、
原点设置属性：transform-origin
transform-origin ：var1 var2;
属性值可以为：10px/left/right/top/bottom/center/20%
6、
backface-visibility：hidden/visible
隐藏被旋转的元素的反面
