CSS 动画总结

855 阅读1分钟

浏览器渲染原理

  • 处理 HTML 标记并构建 DOM 树。
  • 处理 CSS 标记并构建 CSSOM 树。
  • 将 DOM 与 CSSOM 合并成一个渲染树。
  • Layout 布局(文档流、盒模型、计算大小和位置)。 + Paint 绘制(把边框颜色、文字颜色、阴影等画出来)。
  • Compose 合成(根据层叠关系展示画面)。

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

transition 过度动画

作用

补充中间帧

语法

transition:属性名 时长 过渡方式 延迟。
transition:left 200ms linear。
还可以用逗号分隔两个不同属性:
transition:left 200ms,top 300ms。
也可以用all来代表所有属性:
transition:all 1s;
过渡方式:
linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps
注意:
并不是所有属性都可以过渡
display:none=>block 就不能过渡,

如何知道哪些浏览器支持css的特性及资料查阅

使用caniuse.com,来查询某一个浏览器,对css特性的支持情况。

Google搜索关键词时后面加上MDN

CSS tricks

张鑫旭的博客

animation

语法

animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名
时长:1S或者1000ms
过渡方式:同transition取值相同,如:linear
次数:1或者2.5或者infinite
方向:reverse|alternate|alternate-reverse
填充模式:none|forwards|backwards|both
是否暂停:paused|running
以上所有属性都有对应的单独属性

CSS盒模型

两种盒模型

  • content-box内容盒子,内容就是盒子的边界(比较常用)

  • content-box 的width=其内容的宽度。

  • border-box 边框盒,边框才是盒子的边界

  • border-box 的width=其内容的宽度+padding+border。