CSS 动画一站式指南( 七 ) _生活百科

3.2 Animate CSSAnimate CSS 是最著名的动画库之一，接下来介绍一下Animate CSS的一些基本用法，详细的用法可以去官网查询。
基本用法
首先在需要添加动画的元素上添加类animated，然后是动画的名字。
<div class="animated slideInLeft"></div>Animate CSS ****还提供了一些类来控制动画的一些属性，例如动画的延迟和速度等。

delay
通过添加delay类来延迟动画的播放。

<div class="animated slideInLeft animate__delay-2s"><div>

speed

通过添加这些类(slow|slower|fast|faster)之一来控制动画速度。
<div class="animated slideInLeft slow|slower|fast|faster"><div>这里用 Animate CSS 库写了一个小的 demo ，在线源码和演示。
4. CSS 动画性能优化回流又叫重排，指几何属性需要改变的渲染，例如当元素的尺寸，布局等发生变化时一般会引发回流。重绘，指外观属性需要改变的渲染，例如当元素的背景色发生变化时一般会引发重绘。
一个 CSS 动画往往会涉及尺寸，位置，颜色等属性的变化，如果处理不当就会引发不断地回流和重绘，导致页面卡顿，尤其在性能有限的移动端这种问题尤为严重。
在上面提到，几何属性改变时一般会引发回流，外观属性改变时一般会引发重绘，那么在 CSS 中哪些属性是几何属性，哪些属性是外观属性呢？这里简单地总结了一下。
几何属性：包括布局、尺寸等可用数学几何衡量的属性。

布局： display 、 float 、 position 、 list 、 table 、 flex 、 columns 、 grid
尺寸： margin 、 padding 、 border 、 width 、 height

外观属性：包括界面、文字等可用状态向量描述的属性

界面： appearance 、 outline 、 background 、 mask 、 box-shadow 、 box-reflect 、 filter 、 opacity 、 clip
文字： text 、 font 、 word

我们知道回流一定会引发重绘，重绘不一定会引发回流。回流成本比重绘成本高得多，一个节点的回流很有可能导致子节点、兄弟节点或祖先节点的回流。频繁触发回流会使得页面不断渲染，从而引发严重的性能问题，因此我们一定要尽可能地避免回流，减少重绘。
接下来介绍一些 CSS 动画性能优化的方法。
4.1 使用 visibility:hidden 替换 display:none从以下四个方面对比一下display:none和visibility:hidden ，方便书写， display:none 简称DN ， visibility:hidden简称VH。