css3-帧动画实现和优化

参考文章
实现帧动画好多种方式，如css3，gif动图，视频，js帧动画，很多做实验比较这几种方式的优劣，最终还是推荐了css3动画

我就直接说实现方式把

1 css3代码
html：

<div  class="loadingMask"><div class="loadingMask-img"></div></div>
css：

  
.loadingMask{
  position: absolute;
  width: 540px;
  height: 960px;
  overflow: hidden;
}
.loadingMask-img{
  content: '';
  width: 7560px;
  height: 960px;
  display: block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-image: url(img/1.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto;
  animation: aniVip 2s steps(14,start) 0.1s infinity ;
  }

@keyframes aniVip {
    0%{transform: translate3d(0,0,0);opacity: 1;}
    50%{opacity: 0.8;}  
    100%{transform: translate3d(-7560px,0,0);opacity: 0;}
}

2animate()
var animation = element.animate(keyframes, options);
keyframes 关键帧

一个对象，代表关键帧的一个集合

options 可选项代表动画持续时间的整形数字 (以毫秒为单位), 或者一个包含一个或多个时间属性的对象

例如上面的动画用函数写就是：

    let bg=document.getElementById("loadingMask-img") as HTMLElement;
    let myAni=bg.animate([
      {transform: 'translate3d(0,0,0)',opacity:1},  
      {opacity:0.8},  
      {transform: 'translate3d(-7560px,0,0)',opacity:0}
    ],{
      duration:2000,
      delay:100,
      easing:'steps(14,start)',
      iterations:1
    })
    myAni.onfinish=()=>{
      console.log("finish")
      this.showGuide=false;  
    }

这么好用的东西当然兼容性很差了啊，所以你要想用这个函数，需要使用https://github.com/web-animations/web-animations-js

参考文章：

强大的CSS3/JS:帧动画的多种实现方式与性能对比
CSS3动画卡顿性能优化解决方案
借助Web Animations API实现JS keyframes动画
标签：animate、css3、keyframes animate