CSS知识总结（三）

一、CSS动画

1>浏览器渲染原理

1. 渲染过程

① 根据html构建HTML树 ② 根据CSS构建css树 ③ 将两棵树合成一棵渲染树 ④ layout布局（文档流、盒模型、计算大小和位置）

⑤ Paint绘制（把边框颜色、文字颜色、阴影等画出来）

⑥ compose合成（根据层叠关系展示画面）

2.三种更新方式

① js/css -- 样式 -- 布局 -- 绘制 -- 合成

② js/css -- 样式 -- 绘制 -- 合成

跳过layout,例如改变背景颜色时，直接repaint+composite

③ js/css -- 样式 -- 合成

改变了transform，只需要composite

2>动画方式

1. css过渡效果transition

  transition: 过渡属性  花费时间  运动曲线 延迟时间

① 属性值：可以用,隔开多种属性，all表示全部属性

 transition: width 200ms ease 0s, height 2s ease 0s;
 transition: all 200ms ease 0s;

② 运动曲线主要包括

linear 匀速
ease 逐渐减慢
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速

2. animation动画

① 步骤

//用keyframs定义动画
@keyframs 动画名称 {
    0% {                  //开始状态
        width: 100px;
    }
    25% {
    ...                   //中间状态
    }
    100% {                //结束状态
        width: 200px;
    }

//元素使用动画
div {
  animation-name: 动画名称；
  animation-duration: 持续时间;
}

② 动画简写属性

animation: 动画名称 持续时间 运动曲线 延迟 播放次数 是否反方向 填充模式 是否暂停;
运动曲线： 和transition取值一样
播放次数： 数字或infinite无限次
方向： reverse/alternate/alternate-reverse
填充模式： none/forwards/backwards/both
是否暂停：paused/running