1、transition： 过渡
transition ：过渡效果的 CSS 属性的名称 完成过渡效果需要多少秒或毫秒 速度效果的速度曲线 过渡效果何时开始
1）过渡效果的 CSS 属性的名称（一般有）：all（默认值）、no、 width、height
2）transition-duration:规定完成过渡效果需要多少秒（s）或毫秒(ms)。
3)transition-delay:定义过渡效果何时开始。
例： 2s:延迟2s进行过渡
-2s:提前
4）transition-timing-function:规定速度效果的速度曲线。
运动形式及属性：
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
有复合写法：例：transition: all 2s linear
注：当总时间与延迟时间同时存在的时候，就有顺序了，第一个值是总时间；第二个值是延迟时间。
例：transition: 2s 3s linear all;
注：不要把transition放到hover中；
2、transform变形
1）translate位移
transform:translate(100px,100px); 分别对应 x , y值；
transform:translateX(100px);
transform:translateY(100px);
transform:translateZ(100px); (有3d效果）
2）scale:缩放
transform:scale(num) “num是一个比例值，正常比例1”
transform:scale(num1，num2) “两个值分别对应w 和 h”
transform:scaleX( );
transform:scaleY( );
transform:scaleZ( ); (有3d效果）
3)rotate旋转
transform:rotate(30deg) ; “单位可以是角度（deg）或弧度（rad）”
正值：顺时针旋转； 负值：逆时针旋转；
transform:rotateX( );(有3d效果）
transform:rotateY( );(有3d效果）
transform:rotateZ( );
4)skew斜切
transform:skew(num1,num2); " num1,num2都是角度，针对的是x,y"
transform:skewX( );
transform:skewY( );
注：斜切没有3d写法；
注：所有的变形操作都不会影响到其他元素（类似于相对定位）
变形操作对inline（内联元素）不起作用
transform可以设置多个值
注：先执行后面的操作，在执行前面的操作
位移会受到后面要执行的旋转、缩放、斜切的影响；
5）transform基点
transform-origin
作用：主要针对旋转和缩放，默认都是中心点为基点
1
2
3、特效顺序做法小技巧
起点值、结束值
1）先把静态的效果做出来
2）把要运动的终点位置先做出来
3）指定transform变形中对应的0值（结束点位置）
4）写transform变形起点值（起点的位置）
2、animation： 动画
原理：逐帧运动，会把整个过程划分成n份；
一般通过@keyframes 规则，创建动画。 在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。
0% 是动画的开始时间-from
100% 动画的结束时间-to
例子：
animation: mymove 开始时间 动画的速度曲线 延迟 重复次数 是否应该轮流反向播放动画
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
1、animation-name:设置动画名字（自定义的）
animation-duration:动画的持续时间
animation-delay: 动画延迟时间
animation-iteration-count:动画重复次数，默认值1， infinite无限次数
animation-timing-function:动画运动形式
2、animation复合样式
1)
animation-fill-mode:规定动画播放之前或之后，其动画效果是否可见。
none（默认值）：运动结束之后回到初始位置，在延迟的情况下，让0%延迟后失效。
backwards：在延迟情况下，让0%在延迟前失效。
forwards:在运动结束之后，停到结束位置。
both: backwards和forwards同时生效
animation-direction:属性定义是否应该轮流反向播放动画
alternate: 一次正向（0%-100%），一次反向（100%-0%）
reverse:永远都是反向（100%-0%）
normal（默认值）：永远都是正向（0%-100%）
3、3D效果
1）perspective（景深）：离屏幕多远的距离，观察元素，值越大，幅度越小。 相当于一个3D的眼镜。
rotateX
rotateY
translateZ
scaleZ
反馈回来的立体，仅限于平面
2）transform-style:3D空间
flat（默认值2d）/ preserve-3d
注：只要有厚度的立方体图形，就必须加3D控件， 在立方体中默认会沿着第一个面进行旋转。
transform-origin:x y z（z不能写单词，必须写值）
perspective-origin:景深基点位置，观察元素角度
backface-visibility背面隐藏
hidden、 visible（默认值）
4、3D写法
scale3d（ ）：三个值，x ,y, z
translate3d( ):三个值 x, y , z
rotate3d( ):四个值
0|1（x轴是否添加旋转角度deg）
0|1（y轴是否添加旋转角度deg）
0|1（z轴是否添加旋转角度deg）
例： rotate3d(1,1,1,30deg)
案例：3D立方体样式