CSS知识总结——CSS动画和浏览器渲染

CSS动画

transform常用功能

CSStransform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。

• 位移 translate

 /* X轴方向走12px,Y轴方向走自身高度的50% */
transform: translate(12px, 50%);
/* transform: translateX(2em); */
/* transform: translateY(3in); */
/* 要设置父容器perspective */
/* transform: translateZ(-200px); */

• 缩放 scale

/* 宽度扩大到两倍，高度缩小到一半 */
transform: scale(2, 0.5);
/* transform: scaleX(2); */
/* transform: scaleY(0.5); */

• 旋转 rotate
  动图详解
  旋转元素，配合着transform-origin属性，transform-origin 是设置旋转点的。(没有设置transform-origin 属性也可以，只不过是根据该元素的中心点旋转，也就是transform-origin：center center;)

ransform: rotate3d(1, 2.0, 3.0, 10deg);
/* 发挥想象力 沿着X轴旋转 */
/*  transform: rotateX(10deg); */
/* 发挥想象力 沿着Y轴旋转 */
/* transform: rotateY(10deg); */
/* transform: rotateZ(10deg); */

• 倾斜 skew

transform: skew(30deg, 20deg);
transform:skewX(10deg);/* 对X方向不变，沿着Y方向旋转10度 */
transform: skewY(10deg);/* 对Y方向进行倾斜10度，意思是保留Y方向，将盒子沿着X方向进行倾斜。*/

transform 多重效果

transform:scale(0.5) translate(-100%,-100%)
transform:none;/* 取消所有 */

transition过渡

补全中间帧
transition详解
MDN详解
transition属性是个复合属性，她包括以下几个子属性：

• transition-property ：规定设置过渡效果的css属性名称
• transition-duration ：规定完成过渡效果需要多少秒或毫秒
• transition-timing-function ：指定过渡函数，规定速度效果的速度曲线
• transition-delay ：指定开始出现的延迟时间
• 默认值分别为：transition: all 0 ease 0;

transition语法

1. transition：属性名 时长 过度方式 延迟
2. transition：left 200ms linear
3. 可以用逗号分隔两个不同属性
4. transition：left 200ms,top 400ms
5. 可以用all代表所有属性
6. transition：all 200ms
7. 过度方式有：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps ,具体知识要靠数学知识

或者使用
使用transition属性也能够实现过渡动画效果，但是略显粗糙，因为不能够更为精细的控制动画过程，比如只能够在指定的时间段内总体控制某一属性的过渡，而animation属性则可以利用@keyframes将指定时间段内的动画划分的更为精细一些。

/* "from" 和 "to"的形式等价于 0% 和 100%。*/
@keyframes heart {
    0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.2);
    }
}
/* @keyframes heart {
    0% { top : 0; left : 0; }
    30% { top : 50px; }
    60% { left : 50px; }
   100% {top : 100px; left : 100%;  }
} */

注意

1. transform一般都需要配合transition过渡
2. inline元素不支持transition，需要先变成block
3. 并不是所有元素都能过渡，display：none=>block 没法过渡；一般改成visibility：hidden=>visible

animation 动画

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

• 时长：1s或者1000ms
• 过渡方式：跟transition取值一样，如linear
• 次数：3或者2.4或者infinite
• 方向：reverse | alternate | alternate-reverse
• 填充模式：none | forwards | backwards | both
• 是否暂停:paused | running
• 以上属性都有单独属性

如何让动画停在最后一帧

/* 动画停在最后一帧 */
animation: xxx 1.5s forwards;

CSS动画优化

1. JS优化
   使用requestAnimationFrame代替setTimeout或setInterval
2. CSS优化
   使用will-change或translate

浏览器渲染过程

• 浏览器将获取的HTML文档并解析成DOM树。
• 处理CSS标记，构成层叠样式表模型CSSOM(CSS Object Model)。
• 将DOM和CSSOM合并为渲染树(rendering tree)将会被创建，代表一系列将被渲染的对象。
• 渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout。浏览器使用一种流式处理的方法，只需要一次pass绘制操作就可以布局所有的元素。
• 将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting.
• Compose合成（根据层叠关系展示画面）
  

更新样式

• 一般用JS来更新样式
  比如 div.style.background='red'
  比如 div.style.display='none'
  比如 div.classList.add('red')
  比如div.remove()(直接删掉结点)
• 三种更新方式
  1.第一种，全走 。 div.remove()会触发当前消失，其他元素relayout
  2.第二种，跳过layout。改变背景颜色，直接repaint+composite
  3.第三种，跳过layout和paint。 改变transform，只需composite
  可查看每个属性触发什么流程