【前置知识：动画的原理、概念】

浏览器渲染原理

步骤

  1. 根据HTML构建HTML树（DOM）
  2. 根据CSS构建CSS树（CSSOM）
  3. 将两颗树合并成一颗渲染树（render tree）
  4. 根据渲染树进行Layout 布局（文档流、盒模型、计算大小和位置）→“素描过程”
  5. Paint 绘制（把边框颜色、文字颜色、阴影等画出来） →“填色过程”
  6. Composite 合成（根据层叠关系展示画面），这样合成渲染效率高

image.png

如何更新样式？

三种更新方式

image.png

三种更新方式的写法

一般只用JS来更新样式
【如何知道哪些样式属性触发哪些流程？】
→ https://csstriggers.com/ 查找属性即可，第一列为谷歌，第二列为火狐，第四列为ie最新版浏览器

  • 第一种，全走

    • div.remove() 会触发当前节点消失，其他元素全走一遍

  • 第二种，跳过Layout

    • 直接改变样式div.style.background=’red’ 或者 添加类以改变样式 div.classList.add(‘red’)

  • 第三种，只走最后一步Composite

    • 改变transform ,只需composite
    • →【CSS动画性能优化】：
      • 把left改为transform
      • JS优化，使用requestAnimationFrame代替setTimeout或者 setInterval
      • CSS优化， 使用will-change 或者 translate

transform四大招

经验：

  • 配合transition过渡使用；
    • transition属性放在父标签样式中；transform属性放在父标签的hover样式中；
      • image.png
  • inline元素不支持transform，需要先转换为block元素

translate位移

x轴方向上：→为正方向，←为负方向
y轴方向上：↓为正方向，↑为负方向
image.png

  • 开发者工具调试小技巧：键盘“↑↓”键微调；按“shift+↑↓”以10像素为单位调

  • 绝对居中的完美答案：

    1. - 先“子绝父相”
    2. - 再left、top各50%和transform：translate（-50%，-50%）
    • 如图：
    • image.png

scale缩放

倍数不用写单位，括号内直接写数字即可
image.png

rotate旋转

transform:rotateZ(45deg) 中Z可不写，默认是Z轴；单位是度数的缩写deg
[前端常用于界面旋转按钮等简单操作]
image.png

skew倾斜

image.png

transform四大招多重组合

组合使用：

  • 用空号隔开
    • 示例：transform:scale(0.5) translate(-100%,-100%)
  • 取消所有 transform:none

transition过渡——transform它爸

作用

补充中间帧

语法

添加transition属性到目标元素上：

  • transition:属性名 时长 过渡方式 延迟

    • 属性名：all代表所有属性 ；可以用逗号分隔两个不同的属性[eg. transition:left200ms,top400ms]
    • 时长：秒用“s”；毫秒用“ms”；“0.5s ”简写为“.5s”
    • 过渡方式：一般默认即可

    • 延迟：写时长，表示延迟多久后开始变形

      创建目标元素伪类选择器

    • 示例如图：

    • image.png
    • 测试链接：http://js.jirengu.com/xotopucapo/1/edit?html,css,output

注意

  • 并不是所有属性都能过渡
    • display：block→none 没法过渡，会直接消失，影响文档流位置
      • 一般改成：visibility：visible→hidden
    • 不建议改不透明度过渡opacity
  • transform只能改变一次东西，即只能确定起始状态和终止状态，不能改变中间状态。
    • 除非使用两次transform，且必须使用 js的setTimeout监听时间 或者 transitionend监听事件 来监听中间点以改变中间状态 [麻烦]

animation动画——transform它爷

语法

声明关键帧：

@keyframes 父标签名称 {
各个关键帧位置 及 transform状态
}
关键帧位置 有百分数写法和from to写法，常用前者
image.png
或者：
image.png

添加animation属性到目标元素上：

  • 缩写语法：时长 | 过渡方式 | 延迟时长 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画作用元素的名称
    • 常用：
    • 次数：infinite无限次数
    • 方向：reverse | alternate | alternate-reverse
    • 填充模式：none | forward一次到最后就停止了 | backward | both
    • 是否暂停：paused | running
  • 具体用法查mdn文档
  • 示例如图：

image.png

  1.   - 测试链接：[http://js.jirengu.com/popateseda/1/edit?html,css,output](http://js.jirengu.com/popateseda/1/edit?html,css,output)