一、浏览器如何渲染网页
浏览器渲染一共有五步
- 处理 HTML 并构建 DOM 树。
- 处理 CSS构建 CSSOM 树。
- 将 DOM 与 CSSOM 合并成一个渲染树。
- 根据渲染树来布局,计算每个节点的位置。
- 调用 GPU 绘制,合成图层,显示在屏幕上
二、创建动画
- transition: property duration timing-function delay;
值 | 描述 |
---|---|
transition-property | 指定CSS属性的name,transition效果 |
transition-duration | transition效果需要指定多少秒或毫秒才能完成 |
transition-timing-function | 指定transition效果的转速曲线 |
transition-delay | 定义transition效果开始的时候 |
.x{
transition: all 1s linear;
}
.x:hover{
transform: scale(1.2);
}
- animation: name duration timing-function delay iteration-count direction;
值 | 描述 |
---|---|
animation-name | 规定需要绑定到选择器的 keyframe 名称 |
animation-duration | 规定完成动画所花费的时间,以秒或毫秒计 |
animation-timing-function | 规定动画的速度曲线 |
animation-delay | 规定在动画开始之前的延迟 |
animation-iteration-count | 规定动画应该播放的次数 |
animation-direction | 规定是否应该轮流反向播放动画 |
通过 @keyframes 规则,能够创建动画。
以百分比来规定改变发生的时间,或者通过关键词 “from” 和 “to”,等价于 0% 和 100%。例如
.x{
animation:mymove 500ms infinite alternate;}
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}