CSS动画

动画的原理

• 由许多静止的画面（帧）

• 以一定的速度(如每秒30张)连续播放

• 肉眼因视觉残像产生错觉

• 而误以为是活动的画面

• 帧： 每个静止的画面都叫做帧

• 播放速度： 每秒24帧（影视）或者每秒30帧（游戏）

• 用left做动画

• 每过一段时间(用setInterval做到)

• 将div移动一小段距离

• 直到移动到目标地点

• 绿色表示重新绘制（repaint)了

• CSS渲染过程依次包括布局，绘制，合成

• 其中布局和绘制有可能被省略

前端高手不用left做动画

• 用transform做动画

• transform: translateX(0=>300px)

• 直接修改会被合成，需要等一会修改

• transition过渡属性可以自动脑补中间帧

• 并没有repaint(重新绘制)

• 比left性能好

浏览器的渲染原理

• 根据HTML构建HTML树(DOM)

• 根据CSS构建CSS树(CSSOM)

• 将两棵树合并成一颗渲染树（render tree)

• Layout布局(文档流，盒模型，计算大小和位置)

• Paint绘制(把边框颜色，文字颜色，阴影等画出来)

• Compose合成(根据层叠关系展示画面)

如何更新样式

• 比如div.style.backgroundd = 'red'

• 比如div.style.display = 'none'

• 比如div.classList.add('add')

• 比如div.remove()直接删除节点

• https://csstriggers.com/

CSS动画优化

• 都在Google写的文章里

• 使用requestAnimationFrame 代替setTimeout 或 setInterval

• 使用 will-change或translate

transform全解

• 位移tanslate

• 缩放scale

• 旋转rotate

• 倾斜skew

• 一般都需要配合transition过度

• inline元素不支持transform， 需要先变成block

transfrom之tanslate

• translateX(<length-percentage>)

• translateY(<length-percentage>)

• translate(<length-percentage>,<length-percentage>?)

• translateZ(<length) 且父容器perspective

• tanslate3d(x, y, z)

• 学会看MDN语法示例

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

transform之scale

• scaleX(<number>)

• scaleY(<number>)

• scale(<number>,<number)?)

• 用的比较少，容易出现模糊

fransform之rotate

• rotate([<angle> | <zero> ])

• rotateZ([<angle> | <zero> ])

• rotateX([<angle> | <zero> ])

• rotateY([<angle> | <zero> ])

• rotate3d 太复杂，无法用语言表述

• 一般用于360度旋转制作loading

• 用到时再搜rotate MDN看文档

transform之skew

• skewX([<angle> | <zero>)]

• skewY([<angle> | >zero>)]

• skew([<angle> | <zero> ],[<angle> | <zero> ]?)

• 用得较少

• 用到时再搜MDN文档

transform 多重效果

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

• fransform: none; 取消所有

实践

• 献给大家

• CSS需要你有想象力，而不是逻辑

• CSS给出的属性都很简单，但是可以组合得很复杂

transition过渡

• 补充中间帧

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

• transition: left 200ms linear

• 可以用逗号分隔两个不同属性

• transition: left 200ms, top 400ms

• 可以用all代表所有属性

• transition: all 200ms

• 过渡方式有： linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps

• 具体含义

注意

• display: none=>block 没法过渡

• 一般改成visibility: hidden => visible

• display和visibility的区别

• background颜色可以过渡

• opacity透明度可以过渡

• 过渡必须要有起始

如果除了起始，还有中间点怎么办?

• *使用两次transfrom

• .a=transform=>.b

• .b=transform=>.c

• 如何知道到了中间点？

• 用setTimeout或者监听transitionend事件

• JSBin示例

• 声明关键帧

• 添加动画

• JSBin示例

• 搜索 css animation stop atend

• 网友给出的答案是加个forwards

• JSBin

@keyframes 完整语法

• 搜索MDN

• 一种写法是from to

• 另一种写法是百分数

animation语法

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

• 时长： 1s或者1000ms

• 过渡方式：跟transition取值一样，如linear

• 次数：1或者2.3或者infinite

• 方向：reverse | alternate | alternate-reverse

• 填充模式： none | forwards | backwards | both

• 是否暂停： paused | running

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