在css3中主要有三种动画
transition：过渡transfrom：2D转换 | 3D转换animation
这个动画意义上是补间动画（自动完成从起始状态到终止状态的过渡，不用管中间的状态），与通过一帧一帧按照固定顺序和速度播放的帧动画不同transition包括四个属性
transition-property：让哪些属性进行过渡，all（宽度背景色），widthtransition-duration：过渡的持续时间transition-timing-function：运动曲线,- linear：线性
- ease：减速
- ease-in：加速
- ease-out：减速
- ease-in-out：先加速后减速
transition-delay：过渡延迟，多长时间后执行这个过渡动画
综合写法
transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
transition: all 3s linear 0s;
转换：transfrom
转换可以实现元素的位移、旋转、变形、缩放甚至支持矩阵方式
- 2D转换：缩放(scale)、移动(translate)、旋转(rotate)
- 3D转换：旋转(rotateX rotateY rotateZ)、移动(translateX translateY translateZ)、透视(prespective)、3D呈现(transform-style)
- 缩放：
scale，进行缩放时不会挤走兄弟元素
transfrom:scale(x,y)
//x：水平方向的缩放倍数，y：垂直方向的缩放倍数
//大于1表示放大，小于1表示缩小，一个值等比例缩放
- 位移：
translate，可以让绝对定位的盒子在父亲中居中
transfrom: translate(水平位移,垂直位移)
//百分比相对于自身移动，正值向右向下，负值向左向上，一个值则表示水平移动
- 旋转：
rotate，一般旋转要同时设置一个过渡动画，不要会一步到位旋转到目标位置体验感不好
旋转时默认按照盒子正中心为坐标原点，transfrom-origin属性可以改变旋转的坐标原点
transfrom: rotate(角度)
//正值：顺时针，负值：逆时针
transform-origin: center bottom;
/*旋转时，以盒子底部的中心为坐标原点*/
动画
【前端|【CSS3】动画详解】设置多个节点精确控制一个或一组动画
定义动画的步骤
- 通过
@keyframe定义动画 - 将这段动画通过百分比，分割成多个节点，然后再各节点中分别定义各属性
- 在指定元素李，通过
animation属性调用动画
//定义动画：
@keyframes 动画名{
from{ 初始状态 }
to{ 结束状态 }
}
animation: 定义的动画名称 持续时间执行次数是否反向运动曲线 延迟执行。(infinite 表示无限次)
推荐阅读
- 前端|【Web书城】图书详情页开发
- 前端|科大讯飞语音合成WebApi
- es6新增语法|数据新增的常用方法（es6-es12）-今天一定要学会
- css|前端开发工程师css样式进阶指南
- odoo|odoo 前端 patch（补丁）用法
- 看动画学算法之:栈stack
- 20k的前端是这样写事件委托的
- 前端|前端开发相关汇总
- Vue基础教程|vue基础教程（上篇）