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👋