CSS动画详解
1.动画的原理
人的视觉暂留而形成，一帧一帧其实都是类似静止的图片
定义：
由许多静止的画面 (帧)
以一定的速度 (如每秒30张) 连续播放时
肉眼因视觉残象产生错觉
概念：
帧：每个静止的画面
播放速度:每秒24帧(影视)或者每秒30帧（游戏)
2.浏览器渲染原理
步骤：
根据HTML构建HTML树 (DOM)
根据CSS构建 CSS树 (CSSOM)
将两棵树合并成一颗渲染树 (render tree)
Layout布局(文档流、盒模型、计算大小和位置)
Paint绘制(把边框颜色、文字颜色、阴影等画出来)
Compose 合成 （根据层叠关系展示画面）
用js更新样式的一般方法
比如div.style.background = 'red'
比如div.style.display = 'none'
比如div.classList.add('red')
比如div.remove(直接删掉节点
以上方法的异同：
先看三种解析方式
(图片来自饥人谷)
-
第一种全部流程的
- div.remove() 会触发当前消失，其他元素relayout
-
第二种跳过 layout布局
- 改变背景颜色这种，直接repaint + composite
-
第三种，跳过layout和paint
改变transform，只需composite
注意必须全屏查看效果,在iframe里看有问题
3.CSS动画优化
JS的优化 使用使用requestAnimationFrame代替setTimeout或setInterval
CSS优化： 使用 will - change 或者 translate
4.transform完整介绍
四个常用功能
-
位移 translate
translateX(<length-percentage>)
translateY(<length-percentage>)
translate(<length-percentage> ,<length-percentage>? ) ?代表可以省略
translateZ(<length>)且父容器 perspective（试点或景深）
-
translate3d(x, y, z)
-
绝对居中的完美答案
top:50%; left:50%; transform:translate(-50%,-50%); // 父元素必须设置了定位
-
-
缩放 scale 用的较少 因为容易模糊
scaleX( <number>)
scaleY( <number>)
scale( <number> , <number>? )
-
旋转 rotate
rotate( [ <angle> |<zero>])
rotateZ([<angle> | <zero>])
rotateX([<angle> | <zero>])
rotateY([ <angle> | <zero>])
rotate3D 太复杂，详细请查资料
-
倾斜 skew
skewX([<angle>|<zero>])
skewY([ <angle><zero>])
skew( [ <angle><zero>],[<angle>|<zero>]?)
-
组合使用
transform: scale(0.5) translate(-100%,-100%);
transform: none;取消所有
经验：
一般都需要配合 transition 过渡
inline 元素不支持 transform ，需要先变成 block
5.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，具体含义要靠数学知识 https://developer.mozilla.org/zh-CN/docs/Web/CSS/timing-function
注意：不是所有属性都能过渡
display: none => block没法过渡
一般改成visibility: hidden => visible
display和 visibility的区别自己搜一下
background颜色也可以过度
6.animation动画
@keyframes 动画名称{
0%{ //起始和结束状态缺少时,会以元素默认的状态为起始和结束状态
}
...中间可以定义无限关键帧 也可以写成 from to 形式
100%{
}
}
关键帧不写属性即为默认值
动画要与相应的元素结合才能触发效果
animation-name:动画名称;
animation-duration:动画时长;
animation-timing-function:动画速度曲线;有如下几个
1.ease
2.ease-in
3.ease-in-out
4.ease-out
5.steps() 步数，可以做动态图
6.贝塞尔曲线
7.linear 匀速
animation-delay:动画延迟时间 默认为零
1.n(指定时间)s
animation-iteration-count: 动画播放次数
1.infinite无限播放次数
2.n(指定次数)
animation-direction:规定动画是否在下一周期逆向播放 默认值normal:每次都正向播放 altermate:奇数次正向播,偶数次反向播
1.reverse:每次都反向
2.alternate-reverse:奇数次反向播,偶数次正向播
animation-fill-mode:起始位置
1.默认值backwards(回到最初状态)
2.forwards:保留最后一帧
animation-play-state:动画的运行/暂停
1.默认running
2.paused:暂停
综合样式：
animation:动画名称 动画时间 动画的速度曲线 动画延迟 播放次数 方向 暂停开始 起始位置 //写在相应的元素上面</pre>
