CSS动画

浏览器渲染原理

  1. 根据HTML构建HTML数(DOM)
  2. 根据 CSS 构建 CSS树(CSSOM)
  3. 将两棵树合并成一颗渲染树(rendertree)
  4. Layout布局(文档流、盒模型、计算大小和位置)
  5. Paint绘制(把边框颜色、文字颜色、阴影等画出来)
  6. Compose 合成(根据层叠关系展示画面)
    CSS动画

三种更新方式

  1. JS/CSS>style>layout>paint>composite
  2. 无layout:JS/CSS>style>paint>composite
  3. 无layout,无paint:JS/CSS>style>composite

参考

https://csstriggers.com/

CSS 动画的两种做法

1-transform

  • 平移:translate(Single/Double(X->Y) < length-percentage> values)
  • translate(-50%,-50%)可做绝对定位元素的居中
  • 旋转:rotate(< angle >):参数为正时,顺时针旋转;参数为负时,逆时针旋转
  • 缩放:scale(sx/sx,sy):sx 表示缩放向量的横坐标
  • 倾斜(扭曲):skew(ax/ax,ay):ax 用于沿横坐标扭曲元素的角度
  • 矩阵变化:matrix(a, b, c, d, tx, ty)
  • 搬运自:https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform
  • inline元素不支持transform,需要先变成block
  • 一般都配合transition过度

1-transtion

/* Apply to 1 property /
/
property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function() */
transition: margin-right 4s ease-in-out;

/* property name(属性名) | duration(持续时间:时长) | timing function(过渡方式) | delay(延迟时间) */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: unset;

不是所有的属性都能过渡
过渡必须要有起始

2-animation

/* @keyframes(关键帧) duration(持续时长) | timing-function(过渡方式) | delay |
iteration(循环)-count(次数) | direction | fill-mode(填充模式) | play-state(播放状态:是否暂停) | name */
animation: 3s ease-in 1s 2 reverse(反方向) both paused(指定暂定动画)) slidein;

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;

/* @keyframes duration | name */
animation: 3s slidein;

上一篇:在unity中实现一个有限状态机(1)


下一篇:11-react 过度动画