持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情
动画
动画就是把动作分解的连续的画幅，通过快速的播放，利用视觉暂留，使人感觉动作流畅进行的效果。
使用left进行动画：
通过计时器，每过一段对box进行一次移动，直到目标地点。浏览器在移动过程中一直进行渲染。
使用transform进行动画:
与lefe方式，在移动过程中就渲染2次，开始一次，结束一次，性能上升。
浏览器渲染过程
- 根据HTML构建HTML树。(DOM)
- 根据CSS构建CSS树。(CSSOM)
- 两棵树合并成一颗渲染树。(render tree)
- Layout布局(文档流，盒模型，计算大小和位置)
- Paint绘制(把边框颜色，文字颜色，阴影等画出来)
- Compose合成(根据层叠关系展示画面)
使用JS更新样式需要经过哪些步骤
可以使用CSS Triggers进行查阅。
transform
transform的四个常用功能
- 位移translate
- 缩放scale
- 旋转rotate
- 倾斜skew
translate:
translateX是沿X轴进行移动，translateY是沿Y轴，translateZ沿Z轴。其中沿Z轴较为复杂，需要设置一个视点，如下展示：
scale:
rotate:
默认是沿Z轴旋转，rotateX是沿X轴进行旋转，rotateY是沿Y轴进行旋转。
skew:
做一个会动的心
鼠标悬浮，心出现动画。
transition过度
作用： 补充中间帧
语法：
- transition:属性 时长 过渡方式 延迟
- transition:left 200ms linear ( 使用all可以代表所有属性)
- 常见的过渡方式：linear | ease | ease-in | rase-out | ease-in-out|MDN自己查
- 可以利用forwards停在最后一帧。
@keyframes完整语法
- 第一种是from to
@keyframes name {
from{
transform:translateX(0%);
}
to{
transform:translateX(100%);
}
}
- 第二种写法是百分数
@keyframes name {
0%{top:0;left:0;}
30%{top:50px;}
60%{left:50px;}
100%{top:100px;left:100%;}
}
animation
animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名；
