CSS3渐变，过度，2D，3D转换，C3动画

C3渐变

线性渐变：属性值之间必须以逗号隔开，最少有两个颜色渐变

background-image：linear-gradient（to 方向，red，blue）；

径向渐变：属性值之间必须以逗号隔开，最少有两个颜色渐变

background-image：radial-gradient（center，ellipse椭圆|circle圆，颜色，颜色）；

C3过度

transition：all 全部 2s...........;

transition-property 属性名

transition-duration 时间（不指定时间默认为0）

transition-timing-function 时间曲线（默认ease曲线，linear匀速）

transition-delay 延迟

2D转换

transform：translate（10px 10px）; 平移X轴，Y轴

transform：rotate（45 deg）; 旋转角度 默认顺时针

transform-orgin：right bottom；| 10px ,10px; 从哪开始旋转

transform：scale（2）； 缩放，放大两倍

transform：skew（10 deg） X轴，Y轴倾斜角度

3D转换 （多了个Z轴）

rotateX ，rotateY，rotateZ，。。。。。。。。。

动画（关键帧）

定义：

@kayframes name{

0%{}

100%

或者from{}

to{}

}

steps（步长）完成动画走多少步，代替匀速

开始：

animation：name /duration 时间 / timing-function 速度曲线 / fill-mode 不播放时样式 / delay 规定何时开始 / iteration-count播放次数（infinite循环）/ direction是否逆向 / play-state 是否暂停（默认running 暂停paused）