过渡
transition过渡
transition 简写
transition: 属性 时长 时速 延迟;
transition: left 2s linear 1s;
transition-property 过渡属性
transition-duration 过渡时长
transition-timing-function 过渡速度函数
1.属性值：linear匀速、ease减速、ease-in加速、ease-out加速、ease-in-out先加速后减速
2.steps步骤
3.贝塞尔曲线
利用复杂的数学公式来自定义速度方式 http://web.chacuo.net/css3beziertool
transition-delay 过渡延长时间
2D变换
transform
**translate 平移 **
水平平移 translateX 垂直平移 translateY
transform: translate(水平 垂直);
scale 缩放
水平平移 scaleX(倍数) 垂直平移 scaleY(倍数)
transform: scale(水平 垂直);
rotate 旋转
以自身中心点为原点旋转 （单位deg-角度）
transform: rotate(旋转的角度deg);
围绕X轴旋转 自身X轴
transform: rotateX(旋转的角度deg);
围绕Y轴旋转 自身Y轴
transform: rotateY(旋转的角度deg);
设置旋转的参照点
transform-origin: X轴 Y轴;
除数值外还可用位置来表示 left/right/center/top/bottom
背面不可见（默认可见）
backface-visibility: hidden;
skew 扭曲
matrix矩阵变形
3d变换
transform
俗称3d变换，基于3d立体的角度来设置盒子
变换3d效果前，要先设置以下3个属性
在父元素中设置景深，一般值为800-1200
perspactive: 1200px;
设置从屏幕哪个点观察3d效果
perspactive-origin: 50% 50%;
表示在3d空间中展示
transform-style: preserve-3d;
3d 属性同2d
多一个Z轴
translate 平移 / rotate 旋转
/* z轴平移，正数表示距离实现更近 */
/* transform: translateZ(-300px); */
/* x轴平移，正数向右 */
/* transform: translateX(100px); */
/* y轴平移，正数向下 */
/* transform: translateY(100px); */
/* x轴旋转，正角度向后倒 */
/* transform: rotateX(45deg); */
/* y轴旋转，正角度右边向后 */
/* transform: rotateY(45deg); */
/* 正角度右边向下 */
/* transform: rotateZ(45deg); */
CSS3动画
使用关键帧
语法：
1.定义动画
@keyframes + 定义动画名 {
初始位置: 0% / from
中间位置: 50% / 百分比值
结束位置: 100% / to
/* 位置可用百分比表示*/
}
2.使用动画
/* hover时使用 */
/* 复合写法 */
animation: 动画名称 需要时长;
animation属性
/* 复合写法 */
animation: 动画名称 动画需要的时长 速度方式 延迟时间 infinite/次数 是否反向运动 动画结束是否停留在结束位置;
指定动画名称
animation-name: ;
指定动画时长
/* 单位可以是s秒，也可以是ms毫秒 -- 1s = 1000ms */
animation-duration: ;
指定速度方式
animation-timing-function: ;
指定延迟时间
animation-delay: ;
指定动画执行次数
animation-iteration-count: 次数 / infinite循环（无限次）;
指定动画执行方向
animation-direction: normal / alternate;
/* normal表示正向播放，alternate表示第一次正向播放，第二次就是反向播放，第三次又是正向播放 */
设置动画结束后 是否 停在最后的位置
animation-fill-mode: forwards / none(默认);
设置动画是运行还是停止
/* 规定动画正在运行或暂停，默认为running */
animation-play-state: paused / running(默认);
渐变
线性渐变
background-image
background也可以 一般使用background-image
background-image: linear-gradient(to 上/下/左/右, 颜色, 颜色, ....);
/* 方向可以是左上，右下。。。也可以是一个角度deg，方向是可选项 */
background-image: repeating-linear-gradient(to 上/下/左/右, 颜色 百分比, 颜色 百分比, ....);
/* 表示0~20%，20%~40% .. 其余不满100%的重复渐变 */
径向渐变
background-image: radial-gradient(颜色, 颜色);
/* 默认圆心为div中心，默认形状椭圆 */
background-image: radial-gradient(形状, 颜色, 颜色);
/* 形状: circle圆形，ellipse椭圆 */
background-image: radial-gradient(at x y, 颜色, 颜色);
/* x和y是指圆心的x和y */
background-image: radial-gradient(形状 at x y, 颜色, 颜色);
/* x和y是圆心的x和y */
background-image: radial-gradient(大小 形状 at x y, 颜色, 颜色);
/* 大小用几个关键字表示 */
/* 最近的边：closest-side
最近的角：closest-corner
最远的边：farthest-side
最远的角：farthest-corner
*/
repeating 重复渐变background-image: repeating-radial-gradient(颜色 百分比, 颜色 百分比);
/* 默认圆心为div中心，默认形状为椭圆 */
