11.过渡 动画 网格 移动端 媒体查询 响应式布局

过渡（transition）
- 通过过渡可以使得元素在样式发生变化时，一点一点的改变
transition-property
- 应用过渡效果的属性
- all 表示所有样式
transition-duration
- 过渡效果所花费的时间
- 单位：
s 秒
ms 毫秒
transition-delay
- 过渡效果的延时
transition-timing-function
- 指定过渡的时间的曲线
- 可选值：
ease， 默认值 先加速然后减速
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
贝塞尔曲线 自定义运动方式
https://cubic-bezier.com/
steps() 分步执行动画
transition
- 过渡的简写属性，可以同时设置过渡的所有样式

通过keyframes来定义关键帧
@keyframes move {
from 表示动画的开始位置
to 表示动画的结束位置

from {
	background-color: #bfa;
	margin-left: 0px;
}
to {
	background-color: deepskyblue;
	margin-left: 500px;
}

animation-name
- 指定动画的名字
animation-duration
- 一次动画执行的时间
animation-iteration-count
- 动画执行的次数
- infinite 一直执行

animation-duration 一次动画需要的时间
animation-iteration-count 动画重复的次数
animation-delay 动画的延时
animation-timing-function 时间函数
animation-timing-function: cubic-bezier(.42,1.56,1,-1.37)；
animation-timing-function: steps(3)；
animation-direction
动画的方向
- 可选值：
normal 默认值
reverse 动画反向执行
alternate 动画正向反向交替执行
alternate-reverse 和alternate相反
animation-direction: alternate-reverse;

animation-fill-mode
- 动画的填充模式
- 可选值：
none 默认值 延迟时元素保持不变，动画执行结束恢复原状
forwards 延迟时元素保持不变，动画执行结束保持to的状态
backwards 延迟时元素变为from状态，动画执行结束恢复原状
both 延迟时元素变成from状态，动画执行结束保持to的状态
animation-fill-mode: both;

animation-play-state
- 动画的播放状态
- 可选值：
paused 暂停
animation-play-state: running;

animation 简写属性可以同时设置所有动画相关的样式

原始的布局的方式（table）
网格布局（grid）
- 网格布局的方式和table类似
- 在网格布局，将网页分为了一行一行和一列一列的
通过对这些行和列的设置帮助我们完成布局
- 网格布局比较适用于复杂的布局
- 相较于弹性盒，无需设置多余的结构
- 结构简单，样式复杂
弹性盒（flex）
- 弹性盒善于单行单列
- 多行多列布局时，需要使用不同的结构组合使用
- 结构复杂，样式简单