CSS动画知识总结

Helllo大家好！我是Cathy海希。今天我想跟大家聊一下CSS动画的相关知识。快跟我来一起来查漏补缺吧！

浏览器渲染原理

这个话题呢，推荐大家有时间的话可以去读读Google团队写的文章，因为人家就是做浏览器的呀。还有比做浏览器更加了解浏览器的吗？我在这里为大家简单总结一下。

首先我们得明确两个概念👇

• HTML文档会生成DOM 树🌲
• CSS文档会生成 CSSOM 树🌲

Get到了吗？那么浏览器就要开始渲染咯～

1. DOM树和CSSOM树会合并后形成渲染树。
2. 根据渲染树来Layout布局（文档流、盒模型、计算大小和位置）；
3. Paint绘制（把边框颜色、文字颜色、阴影等画出来）；
4. Composite合成（根据层叠关系展示画面）。

概括地来说是有以上四大步骤，而每个步骤呢，都有很多操作可以做，以达到优化浏览器渲染的目的，在此就不多赘言了。感兴趣的朋友们可以去Google的官网阅读相关文档哦😊

CSS 动画的两种做法

What😳？CSS竟然可以做动画？跟我一样的小白朋友们是不是有一种活见久的感觉？ 没错，CSS确确实实可以做动画，而且操作还挺简单的！总共有两种方式，分别是

• transition

  transition的中文意思是过渡，它的作用是用于补充中间帧。 既然有中间，那么就意味着要有起始。没错，在使用transition的时候必须要有起始。简单来说就是一般只有一次动画，或者两次。比如说hover和非hover状态的过渡。

  #heart{
  transition: all 1s;
  }
  复制代码

  transition内部的语法，它可以添加很多内容，比如：属性名（用all可以代表所有属性）｜时长｜过渡方式｜延迟等，用逗号分隔两个不同的属性。大家在有需要用的时候去查阅MDN文档就好📖

• animation animation是动画的意思，我们可以制作关键帧来达到动画的效果。

  1. 首先用@keyframes来声明关键帧heart1；

  @keyframes heart1 {
    0% {
      transform: scale(1.0);
    }
    100% {
      transform: scale(1.2);
    }
  复制代码

  2. 声明完之后呢，把关键帧名heart1挂到你想要添加动画的选择器里就好了，使用animation属性。

  #heart1 {
  animation: heart1 500ms infinite alternate;
  复制代码

  animation内部的语法，它可以添加很多内容，比如：时长｜过渡方法｜延迟｜次数｜方向｜填充模式｜等等...同样地有需要时记得查阅MDN文档哦😊

CSS学习心得

CSS学到现在，算是稍微告一段落了。CSS是一门不正交的科学，所以很多地方不能用常理进行推断。我们能做的就是在不断地试验中去发现新的知识。

那么我们就很快再见咯！See you next time👋