CSS3动画

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不会生效，不写就是外阴影) 多阴影 ​ 注：默认盒子的阴影就是黑色。