CSS
变形、过渡、动画
transform
2D相关属性：
transform: translate（移动）、rotate（旋转）、scale（放缩）、matrix（变形矩阵）等
transform-origin: right top、center等 表示变形时依据的原点
3D相关属性：
transform: translate3d、rotate3d、scale3d、matrix3d等
transform-origin: right top、50px 30px等 表示变形时依据的原点
transform-style: flat 或 preserve-3d 看子元素的3d表现
perspective: 观看点距离z=0这个平面的距离，可以在transform中使用perspective()作用于当前元素，也可以直接使用，给后代元素一个统一值
perspective-origin: 观看者的位置，如top、bottom等
backface-visibility: 元素正面只有朝向观察者的时候可见
顺便贴上演示代码：
transition
通过指定某些元素从一种起始状态，在一段时间内以某种变化节奏，过渡到终止状态。
其中timing-function一般有三种 :
- linear 线性
- cubic-bezier() 贝赛尔曲线
- step 阶跃——一般用于逐帧动画、定格动画、闪烁、时钟等
animation
@keyframes关键帧 用来定义动画过程中出现的关键样式
animation相关属性 ：
- animation-name 关键帧的名字
- animation-duration 动画时长
- animation-timing-function 动画节奏
- animation-delay 延时开始的时间
- animation-iteration-count 执行次数
- animation-direction 是否反向或交替
- animation-fill-mode 动画执行前后的样式采用
- animaiton-play-state 动画运行状态
如何使得动画性能更好？
- 尽量不用触发reflow的属性
- 在遇到性能问题时触发硬件加速，比如设置will-change属性、设置transform3d等
- 尽量使用transform和opacity来写动画
响应式设计
遵循的原则
- 优先使用流失布局，比如百分比、flex、grid等
- 使用响应式图片，匹配尺寸，节省带宽
- 使用媒体查询为不同的设备类型做适配
- 给移动端设备设置简单、统一的视口
- 使用相对长度，em、rem、vw作为长度度量
