1、变形-transform 迅速变化
2、过渡-transition 缓慢变化
3、动画-animation 关键帧动画
1、转换的原点
默认情况下，原点是在当前物体的中心点上
修改原点：
属性：transform-origin
值：1、x坐标 y坐标
当前物体的左上点为 x:0 y:0
2、宽度百分比 高度百分比
0% 0% 左上点
50% 50%中心点
100% 100%
3、top：上
bottom：下
left：右
center:中间
center center 中间
left top：左上方
transform-orign:0;表示 所有轴的位置都将归到0点处
transform-orign:50px 50px;表示 x轴在50像素处，y轴在50像素处
transform-orign:50px 50px 50px;表示x轴 Y轴 z轴
2、变形2D
旋转：rotate()
位移：translate()
缩放：scale()
倾斜：skew()
旋转：围绕一份参照原点（transform-orign）,旋转指定角度，默认为顺时针
语法：transform:rotate(ndeg);
n为正 顺时针旋转
n为负 逆时针旋转
注意：rotate在旋转的过程中，不但能够旋转元素，同时能够旋转绘图的方向。如果配和着其他其他的变形来做的话，rotate在前的话
，会影响之后延坐标轴的其他变形。
解决方案：如果配合其他变形一起来做，最好将rotate放在最后一个函数上
位移：延坐标方向 移动指定的距离
语法：translate(x轴移动距离，y轴的移动距离)；
x:正为右，负为左
y:正为下，负为上
transform:translate(50px 50px);
注意位移不会影响其他元素位置，但可能会盖住周围元素
其他两个单方向位移：
translateX(距离)
translateY(距离)
缩放：将指定坐标轴上的坐标缩放指定的倍数
语法：scale(倍数)
倍数：0-1之间的小数 缩小
>1放大
scale(倍数)表示等比缩放
其他两个单方向缩放：
scaleX（倍数）
scaleY(倍数)
倾斜：沿着坐标轴方向，倾斜指定角度
语法：skew(ndeg);仅延X轴倾斜
skew(ndeg,ndeg) 延X，y轴同时倾斜
skewX(ndeg)
skewY(ndeg)
X轴：角度为正，向左倒
角度为负，向右倒
Y轴：角度为正，向上倾斜
角度为负，向下倾斜
3、3D变形
元素，要从立体角度观察
坐标轴，X Y Z轴
perspective
设定假定的人眼位置到投影平面的距离
位移：
3D位移可以改变元素在Z轴上的位置
translate(z);
translate3d(x y z)
旋转：transform:rotateX(ndeg);
rotateY(ndeg);
rotateZ(ndeg);
缩放：
transform:
scale(z);
scale(x y z);
过渡属性
1、属性：transition-property
transition-property:background,color;
2、过渡时间：
属性名：transition-duration:
以秒（s）或（ms）为单位
transition-duration:5s;
3、过渡函数：
属性名：transition-timing-function
ease：默认值，慢速开始 快速变快 慢速结束
linear:匀速过渡
ease-in:慢速开始，加速效果
ease-out:以慢速结束，，减速效果
ease-in-out；一慢速开始和结束，中间先加速后减速
4、过渡延迟
属性名：transition-delay
以秒或毫秒为单位
5、整合transition属性
transition:属性名 持续时间 过渡函数 [延迟]
属性名 持续时间 过渡函数 [延迟]
2、关键帧动画
关键帧：动画执行过程中，物体在某一位置上的特殊状态
关键帧动画：使用连续的关键帧，控制物体连续的状态变化
什么时候使用关键帧动画：
1、连续有规律的过渡-————transition
2、无规律的连续变化——————动画 animation
如何实现动画
两大步
1、定义关键帧
@keyframes 动画名{
from | 0%{
css样式
动画开始的状态
}
percent{
}
to{
css样式
动画结束的状态
}
}
@keyframes change{
from|0%{
background:red;
}
10%
{
background:yellow;
}
50%
{
background:green;
}
to|100%
{
background:black;
}
}
浏览器兼容性：
@keyframes:IE 火狐
@-webkit-keyframes:chrome Safair
@-o-keyframes:Opear
2、触发动画（调用动画）
属性：animation
animatin；动画名 持续时间 速度类型（linear ease ease-in ease-out...）
如何：
1、写在非伪类选择器中，页面加载则执行动画
2、写在伪类中，伪类触发时则播放动画
浏览器兼容性：
-webkit-animation:Chrome ,Safair
-o-animation:Opear
3、动画子属性
1、animation-name @keyframes(动画)名称
2、animation-duration：动画时长
3、animation-timing-function:动画速度函数
4、animation-delay：动画的延迟时间
animation:name duration timing-function
5、animation-iteration-count:播放次数
取值：1、具体数值
2、infinite(无限次播放)
6、animation-direction:动画播放方向
取值：1、normal（正常播放）
2、alternate 轮流播放
奇数次数：正向播放
偶数次数：反向播放
animation:name duration timing-function iteration-ount direction
7、animation-fill-mode
动画播放后的效果
备选值：
1、none：不改变默认行为
2、forwards:动画完成后保持最后一个属性状态
3、backwards:动画完成后显示开始属性状态
4、both
8、animation-play-state
控制动画暂停与播放
备选值：
1、paused:暂停动画
2、running:播放动画
使用场合：1、配合伪类选择器
2、