setTimeout

不准时…实际开发过程中我们会经常遇到首次进入页面进行相应提示然后指定时间后自动消失或者前端时钟展示等需求。

setTimeout

除了最小延时之外定时器仍然有可能因为当前页面或者操作系统/浏览器本身被其他任务占用导致延时。

setTimeout()的主线程执行完其他任务之后回调函数和代码段才能被执行。

最大延时值

{timeouts.push(fn);window.postMessage(messageName,

*);}function

timeouts.shift();fn();}}}window.addEventListener(message,

handleMessage,

api运行效果良好甚至在低性能的系统上。

渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅让浏览器控制动画序列允许浏览器优化性能和效果如降低位于隐藏选项卡中的动画更新频率。

animation

animation-nameanimation-duration,

animation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-mode

animation-play-state

属性说明示例animation-name指定应用的一系列动画animation1,animation2animation-duration指定一个动画周期的时长单位

ms60sanimation-timing-function在每一动画周期中执行的节奏ease、linear、steps(60)animation-delay定义动画于何时开始单位

ms100msanimation-iteration-count定义动画在结束前运行的次数infinite无限次、3animation-direction指示动画是否反向播放normal、alternate、reverseanimation-fill-mode设置

CSS

动画在执行之前和之后如何将样式应用于其目标forwards、backwardsanimation-play-state定义一个动画是否运行或者暂停running、paused

animation:

forwards;steps(number_of_steps,

direction)定义了一个阶梯函数将输出值的域等距地划分。

自定义数据属性