CSS 动画

FENG
107 阅读2分钟

一、浏览器渲染原理

（一） 浏览器渲染过程步骤

  • 根据 HTML构建HTML 树（DOM）
  • 根据 CSS构建CSS 树（CSSOM）
  • 将两棵树合并成一颗渲染树（render tree）
  • Layout布局（文档流、盒模型、计算大小和位置）
  • Paint绘制（把边框颜色、文字颜色、阴影等画出来）
  • Compose合成（根据层叠关系展示画面）

（二） 三种更新方式

  1. 第一种，全走(JS/CSS>样式>布局>绘制>合成）
  • div.remove()会触发当前消失，其他元素relayout
  1. 第二种，跳过 layout (JS/CSS>样式>绘制>合成）

  • 改变背景颜色，直接repaint+ composite 3.第三种，跳过 layout 和 paint (JS/CSS>样式>合成）

  • 改变transform，只需composite

  • 注意必须全屏查看效果，在iframe里看有问题

  • 一般用JS来更新样式

比如div.style.background='red'
比如div.style.display='none'
比如div.classList.add（'red'）
比如div.remove（）直接删掉节点
  • 在CSS Triggers网站可查询每个属性触发什么流程。

（三） transform

transform四个常用功能：

  1. 位移 translate 
常用写法:
translateX( <length-percentage>)
translateY( <length-percentage>)
translate(<length-percentage>, length-percentage>?)
translateZ（<length>）且父容器 perspective translate3d(x,y,z)
translate（-50%，-50%）可做绝对定位元素的居中
  1. 缩放 Scale 
常用写法:
scaleX(<number>)
scaleY(<number>)
scale(<number>,<number>?)
  1. 旋转 rotate 
常用写法:
rotate([<angle>|<zero>])
rotateZ([<angle>|<zero>])
rotateX([[<angle>|<zero>])
rotateY([<angle>|<zero>])
一般用于360度旋转制作loading
  1. 倾斜 skew 
常用写法:
skewX([<angle>|<zero>])
skewY([<angle>|<zero>])
skew([<angle>|<zero>],[<angle>|<zero>]?)
  • 一般都需要配合transition过渡，inline元素不支持transform，需要先变成block

（四） transform 多重效果

  • 组合使用
transform:scale(0.5)translate(-100%,-100%);
transform∶none;取消所有

left: 50%;
top: 50%;
transform: translate(-50%,-50%)（绝对居中）

二、CSS 动画的两种做法（transition 和 animation）

（一）transition（过度）

1.作用

  • 补充中间帧
  1. 语法
  • transition∶属性名 时长 过渡方式 延迟
  • 可以用逗号分隔两个不同属性
  • 可以用 all代表所有属性
  • 过渡方式有∶linear（匀速）|ease（先快后慢）|ease-in（先慢后快）|ease-out（慢—快—慢）|ease-in-out|cubic-bezier|step-start|step-end|steps
  • 并不是所有属性都能过渡 display∶ none => block没法过渡一般改成visibility∶hidden=>visible
  1. 展现两次动画
  • 使用两次 transform

.a === transform ===>.b

.b === transform ==>.c

  • 中间点用 setTimeout或者监听transitionend事件

  • 使用animation也可以（声明关键帧+添加动画）

（二）animation

  1. @keyfirames 完整语法 标准写法
  • 搜索keyframesMDN
  • from to
  • 百分数
  1. animation缩写语法 animation∶时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名;
  • 时长∶1s或者1000ms
  • 过渡方式∶跟 transition取值一样，如 linear
  • 次数∶3或者2.4或者infinite(无限次)
  • 方向∶ reverse| alternate|alternate-reverse
  • 填充模式∶ none|forwards(到最后,动画停在最后一帧)|backwards|both
  • 是否暂停∶ paused(暂停) |running(恢复)

以上所有属性都有对应的单独属性

avatar
文章
阅读
粉丝