写代码啦
CSS 知识总结
回复数(0) 浏览数(72)
{{topic.upvote_count || 0}} 编辑 回复

浏览器渲染原理

  1. HTML DOM
  2. CSS DOM
  3. Render Tree
  4. Lyaout(文档流、盒模型、计算大小和位置)
  5. Paint(填像素)
  6. Composite(根据** * 层叠关系* **展示画面)

CSS 动画的两种做法(transition 和 animation)

transition

https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition
MDN最得劲了 没得好说

animation

https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation

区别(原文地址:https://www.cnblogs.com/mufc/p/11468742.html):

1、transition 是过渡,是样式值的变化的过程,只有开始和结束;animation 其实也叫关键帧,通过和 keyframe 结合可以设置中间帧 的一个状态;

2、animation 配合 @keyframe 可以不触发时间就触发这个过程,而 transition 需要通过 hover 或者 js 事件来配合触发;

3、animation 可以设置很多的属性,比如循环次数,动画结束的状态等等,transition 只能触发一次;

4、animation 可以结合 keyframe 设置每一帧,但是 transition 只有两帧;

5、在性能方面:浏览器有一个主线程和排版线程;主线程一般是对 js 运行的、页面布局、生成位图等等,然后把生成好的位图传递给排版线程,而排版线程会通过 GPU 将位图绘制到页面上,也会向主线程请求位图等等;
我们在用使用 aniamtion 的时候这样就可以改变很多属性,像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起,页面的回流和重绘,对性能影响就比较大,但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图,当然也就不会引起页面的重排了;

心得

想象力+实践+没有为什么

{{topic.upvote_count || 0}}

浏览器渲染原理

  1. HTML DOM
  2. CSS DOM
  3. Render Tree
  4. Lyaout(文档流、盒模型、计算大小和位置)
  5. Paint(填像素)
  6. Composite(根据** * 层叠关系* **展示画面)

CSS 动画的两种做法(transition 和 animation)

transition

https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition
MDN最得劲了 没得好说

animation

https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation

区别(原文地址:https://www.cnblogs.com/mufc/p/11468742.html):

1、transition 是过渡,是样式值的变化的过程,只有开始和结束;animation 其实也叫关键帧,通过和 keyframe 结合可以设置中间帧 的一个状态;

2、animation 配合 @keyframe 可以不触发时间就触发这个过程,而 transition 需要通过 hover 或者 js 事件来配合触发;

3、animation 可以设置很多的属性,比如循环次数,动画结束的状态等等,transition 只能触发一次;

4、animation 可以结合 keyframe 设置每一帧,但是 transition 只有两帧;

5、在性能方面:浏览器有一个主线程和排版线程;主线程一般是对 js 运行的、页面布局、生成位图等等,然后把生成好的位图传递给排版线程,而排版线程会通过 GPU 将位图绘制到页面上,也会向主线程请求位图等等;
我们在用使用 aniamtion 的时候这样就可以改变很多属性,像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起,页面的回流和重绘,对性能影响就比较大,但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图,当然也就不会引起页面的重排了;

心得

想象力+实践+没有为什么

72
回复 编辑