一、变形、过渡、动画

1.变形（transform）

• translate（移动）
• rotate（旋转）
• scale（放缩）
• matrix（变形矩阵）

2.过渡（transition）

• 通过指定某些元素属性从一种起始状态，在一段时间内以某种变化节奏，过渡到终止状态

div{
  transition:<property><duration><timing-function><delay>;
}

• 其中timing-unction一般有三种用法：线性(inear)、贝塞尔曲线(cubic-bezier()或ease-in等)、阶跃(step)

3.动画（animation）

• @keyframes关键帧：用来定义动画过程中出现的关键样式

• animation相关属性：用来为元素添加动画
  • animation-name:定义好的关键帧的名字
  • animation-duration:动画时长
  • animation-timing-function:动画节奏
  • animation-delay:延时开始的时间
  • animation-iteration-count:执行次数
  • animation-direction:是否反向或交替
  • animatinfill-mode:动画执行前后的样式采用
  • animation-play-state:动画运行状态

4.如何写动画性能更好？

• 尽量不用触发reflow的属性
• 在遇到性能问题时可以触发硬件加速，比如设置will-change属性、设置transform3d等
• 尽量使用transform和opacity去写动画

二、响应式设计

1.响应式设计原则

• 优先选用流式布局，如百分比、flex、grid等
• 使用响应式图片，匹配尺寸，节省带宽
• 使用媒体查询为不同的设备类型做适配
• 给移动端设备设置简单、统一的视口
• 使用相对长度，em、rem 、ww 做为长度度量

2.媒体查询

• 媒体查询允许某些样式只在页面满足特定条件时才生效。我们可以将媒体类型(如screen、print)以及媒体特性(如视口宽度、屏幕比例、设备方向:横向或纵向)做为约束条件

• Tips
  • 媒体查询同样遵循cascading层叠覆盖原则，min-和max-选择一个
  • 由于设备的多样化逐渐不可枚举，断点的选择尽量根据内容选择
  • 由于断点的增加会增加样式处理的复杂度，所以尽量减少断点

3.设备像素

• 设备像素(物理像素) : 显示器上绘制的最小单位，显示屏通过控制每个像素点的颜色，使屏幕显示出不同的图像
• 设备像素和设备相关，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了

4.相对长度

• em（可以让展示区域根据展示字号的不同，做出放所调整）
  • 在非font-size属性中使用是相对于自身的字体大小
  • 在font-size.上使用是相对于父元素的字体大小(一般不在这个属性上使用，因为tont-size的继承特性，多重嵌套后大小会不断放大或缩小，产生混乱)
• rem
  • rem:根元素的字体大小。通过伪类:oot或者html选择器选定。由于是根元素的font-size，所以不会像em那样出现多重嵌套问题，减少了复杂性，同时作为一个相对单位，可以进行适配放缩，可以用来做响应式布局

三、CSS生态相关

1.CSS预处理器

2.scss、less、stylus简单对比：

3.CSS后处理器

4.原子化CSS

• 原子化CSS是一种CSS的架构方式，它倾向于小巧且用途单一的class，并以视觉效果进行命名。
• 现有的库或框架：Tailwind、Windicss、Tachyons unocss...

四、总结

本节课主要讲述了CSS的整体发展及一些比较重要的知识，其中通过一些简单的代码讲述了响应式设计、工程架构、盒模型、网格布局、变形、动画、语言增强等一些知识，受益匪浅，不过课程所学的知识比较浅，还需要进一步深入学习。