CSS动画知识总结

Cathy海希TV
505 阅读2分钟

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);
  }
    1. 声明完之后呢，把关键帧名heart1挂到你想要添加动画的选择器里就好了，使用animation属性。
    #heart1 {
animation: heart1 500ms infinite alternate;

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

CSS学习心得

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

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

avatar
文章
阅读
粉丝