transition过渡
transition-property : 规定设置过渡成果的CSS属性的名称。
transition-property:width ,height;
all示意所有的属性，默认值
transition-duration : 规定实现过渡成果须要多少秒或毫秒。
transition-duration
须要加工夫单位是 s秒 ms毫秒 1s ===1000ms
transition-delay :1s; 定义过渡成果何时开始。
transition-delay:2s;延时的成果
transition-delay:-2s;延时的成果
transition-timing-function : 规定速度成果的速度曲线。
linear-----------------匀速
ease（默认值）-----------------逐步慢下来
ease-in-----------------减速
ease-out-----------------加速
ease-in-out-----------------先减速后加速
cubic-bezier----------------（ http://cubic-bezier.com ）
复合写法：
transition:all 2s linear
transition:2s linear all
transition:2s all linear
留神:当总工夫与延迟时间同时存在的时候，就有程序了，第一个是总工夫，第二个是延迟时间。
transition:2s 3s linear all
transform变形
translate : 位移
transform:translate(x,y);
transform:translateX(100PX);
transform:translateY(100PX);
transform:translateZ(100PX);
scale: 缩放
transform:scale(num);
num是倍数，失常为1.
transform:scale(num1，num2);
两个值，别离代表w h
transform:scaleX(num);只针对宽
transform:scaleY(num);只针对高
transform:scaleZ(num);
rotate : 旋转
transform: rotate(num) num是旋转的角度30deg
正值：顺时针旋转
负值：逆时针旋转
示意一个角：角度deg 或 弧度rad
注 : rotate()跟rotateZ()是等价关系。
rotateX(3D)
rotateY(3D)
rotateZ(2D)
skew : 斜切
transform:skew( num1,num2):num1 和num2都是角度，针对的是x和y
transform : skewX( )
transform : skewY( )
注: skew没有3d写法。
注：设置多个值时候的程序；先执行前面的，在执行后面的
位移会受到前面要执行的缩放、旋转和斜切的影响。
注：所有的变形不会影响其余元素，相似于绝对定位。
注:变形操作对inline(内联元素)不起作用的。
tranform-origin 基点地位
次要是针对旋转和缩放，默认都是中心点为基点。
设置transform-origin的基点地位。
animation动画
原理：逐帧动画。会把整个静止过程，划分为100份。
animation-name : 设置动画的名字 (自定义的)
animation-duration : 动画的持续时间
animation-delay : 动画的延迟时间
animation-iteration-count : 动画的反复次数 ，默认值就是1 ， infinite有限次数
animation-timing-function : 动画的静止模式
linear-----------------匀速
ease（默认值）-----------------逐步慢下来
ease-in-----------------减速
ease-out-----------------加速
ease-in-out-----------------先减速后加速
cubic-bezier----------------（ http://cubic-bezier.com ）
animation-fill-mode : 规定动画播放之前或之后，其动画成果是否可见。
none (默认值) : 在静止完结之后回到初始地位，在提早的状况下，让0%在提早后失效
backwards : 在提早的状况下，让0%在提早前失效
forwards : 在静止完结的之后，停到完结地位
both : backwards和forwards同时失效
animation-direction : 属性定义是否应该轮流反向播放动画。
alternate : 一次正向(0%~100%)，一次反向(100%~0%)
reverse : 永远都是反向 , 从100%~0%
normal (默认值) : 永远都是正向 , 从0%~100%
@keyframes 动画的名字{
from{}/*终点地位*/等价于0%
to{}/*起点地位*/等价于100%
}
注：默认状况下，元素静止结束后，会停到起始地位。
一款弱小的预设css3动画库。
官网地址：https://daneden.github.io/ani...
根本应用：
animated : 基类(根底的款式，每个动画成果都须要加)
infinite : 动画的有限次数
CSS3突变
background-image:linear-gradient(to top, red ，blue);
background-image:linear-gradient( num deg, red ，blue);
background-image:linear-gradient( red 25% ,blue 75%);
linear-gradient : 线性突变
to top:示意去哪儿方向
num deg:角度以底下中点为终点bottom地位，顺时针转。
red 25% ,blue 75%示意从25%到75%突变，0~25%与75~100%没有变动。
radial-gradient : 径向突变
background : linear-gradient(red 25%, blue 25% ,blue 50%,green 50%,green 75%,orange 75%,orange 100% );
如下图，设置的四个色的色彩
文字暗影
text-shadow
x
y
blur
color
多暗影
注：默认状况下，暗影的色彩跟文字的色彩雷同。
盒子暗影
box-shadow
x
y
blur : 含糊值
spread : 范畴
color
inset : 内暗影 outset(默认值：外暗影 , 写上outset不会失效，不写就是外暗影)
多暗影
注：默认盒子的暗影就是彩色。