《浅析CSS动画》浏览器渲染原理渲染步骤根据HTML构建HTML树（DOM）根据CSS构建CSS树（CSSOM）将两棵

浏览器渲染原理

在这里插入图片描述

渲染步骤

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

三种更新方式

在这里插入图片描述

第一种更新方式——全更

div.remove()，触发当前元素消失，其他元素relayout

第二种更新方式——跳过layout

只改变背景颜色，repaint+composite

第三种方式——跳过layout和paint

只改变了transform，只需要composite

transform用法

常用功能

translate：位移

transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(length);
transform: translate3d(x,y,z);

translate(-50%,-50%)可以做绝对定位元素居中

scale：缩放

transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);

rotate：旋转

transform: rotate(0.5turn);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: rotate3d

一般用于旋转360°制作loading

skew：倾斜

transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

注意：上述元素一般都需要加transition过渡（加延迟时间）
** inline元素不支持transform，需要先变成block类型**

transform组合使用

transform: scale(0.5) translate(-100%,-100%);
transform: none;

transition过渡

补充中间帧数

语法

简写语法：
div {
    transition: <property> <duration> <timing-function> <delay>;
}

标准语法：
<single-transition>#
where 
<single-transition> = [ none | <single-transition-property> ] || <time> || <timing-function> || <time>

where 
<single-transition-property> = all | <custom-ident>
<timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>

where 
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/zh-CN/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/zh-CN/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)

where 
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end

**
注意：并不是所有的属性都能过渡，例如display:none=>block就不能过渡

使用transform找到过渡中间点——使用两次transform

例：.a===transform===>.b
.b===transform===>.c
用setTimeout或者监听transitionend事件

animation

@keyframes语法

第一种是from to；
@keyframes slidein {
  from {
    transform: translateX(0%); 
  }
  to {
    transform: translateX(100%);
  }
}

第二种是写百分数；
@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

animation缩写语法

animation：时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名；

标准语法

where 
<single-animation> = <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]

where 
<timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>
<single-animation-iteration-count> = infinite | <number>
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
<single-animation-fill-mode> = none | forwards | backwards | both
<single-animation-play-state> = running | paused
<keyframes-name> = <custom-ident> | <string>

where 
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/zh-CN/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/zh-CN/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)

where 
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end

CSS动画小实践（跳动的红心）
jsbin.com/kanigulaga/…

CSS动画的优化

CSS命令性能表

在这里插入图片描述
具体方法查询
developers.google.com/web/fundame…

JS优化
使用 requestAnimationFrame 代替 setTimeout 或 setlnterval

CSS优化
使用will-change 或 translate

《浅析CSS动画 》