css动画总结浏览器渲染过程根据HTML构建HTML树根据CSS构建CSS树将两棵树合并成一棵渲染树Layout布局（文

浏览器渲染过程

根据HTML构建HTML树
根据CSS构建CSS树
将两棵树合并成一棵渲染树
Layout 布局（文档流、盒模型、计算位置与大小）
Paint 绘制（边框、背景、文字颜色）
Compose 合成（根据层叠关系展示画面）

3种渲染（更新）方式

1-6全走一遍（如使用left属性改变位置）
跳过Layout，直接5和6（如使用background属性改变颜色）
跳过Layout和Paint，只需Compose（如使用transform属性）

从上述可知不同的属性触发的更新流程也不同所以我们可以在这里查找属性对应的更新流程啦~

关于css动画优化

js优化：使用requestAminationFrame代替setTimeout或者setInteral
css优化：使用will-change或translate

transform

位移 translate
缩放 scale
旋转 rotate
倾斜 skew

ps:

一般配合transition过渡
inline元素不支持transform 需要先变成block
translate(-50%,-50%) 可做绝对定位元素的居中
transform:none 取消所有
rotate一般用于制作加载中的效果
translateZ(length)时父容器有perspective

使用transform只能看到更新前与更新后的变化看不到中间过程这时候可以使用transition来补充中间帧展示过渡效果

transition 过渡

作用：补充中间帧
语法：属性名时长过渡方式延迟时间

ps:并不是所有属性都能过渡如：display:block--------display:none就不行所以想要盒子消失禁用display:none 使用visibility:hidden更优

当过渡存在中间点时有两种方法：

两次使用transform
使用animation

两次transform

a------transform------b
b------transform------c
使用js来控制增加类选择器监听中间点

#demo{
  width: 100px;height: 100px;border: 1px solid red;margin: 50px;transition: transform 1s linear;
}
#demo.b{
  transform: translateX(200px);
}
#demo.c{
  transform: translateX(200px) translateY(100px);
}

animation 过渡

作用：声明关键帧添加动画
语法：动画属性时长过渡方式延长时间次数方向是否暂停填充模式
@keyframes语法如下设置百分树另一种是from----to----

#demo.start{
  animation: xxx 1.5s;
}
@keyframes xxx {
  0% {
    transform: none;
  }
  66.66%{
    transform: translateX(200px);
  }
  100%{
    transform: translateX(200px) translateY(100px);
  }
}

问：如何让动画停在最后一帧？ animation加上forwards即可

学习总结

要善于使用MDN等一些学习文档查阅信息提高学习能力
了解与掌握属性用法的最好办法是写代码实践多多练习自然就记住了

css动画总结