实现动画方式

1. animation

animation: move 2s infinite alternate;
@keyframes move
  {
    0%   {opacity: 0;}
    50%  {opacity: 1;}
    100% {opacity: 0;}
   }

animation: move 1s steps(7, end); // 8帧分7步
@keyframes signAnima {
    0% {background-position-x: 0;}
    100% {background-position-x:  -90px;}
 }

2.lottie

ui提供一个动画的json，默认的渲染方式是svg。
(1)npm install lottie-web
(2)lottie.vue

(3）在组件内引入lottie.vue,引入json,处理图片资源路径

import lottie from 'xxx'
import animationData from 'xxx'
animationData.assets.forEach((item, index) => {
  item.u = ''
  item.p = require(`@/assets/xxx/img_${index}.png`)
})

(4)使用lottie组件

// defaultOptions
defaultOptions: {
  animationData: animationData,
  autoplay: true,
  loop: false,
  // 其他
 }
// handleAnimation
handleAnimation(anim) {
   this.anim = anim;
   this.anim.addEventListener('complete', () => {
     this.anim.destroy()
   });
},

3.animejs

anime.js 是一款功能强大的Javascript 动画库插件。anime.js 可以和CSS3 属性，SVG，DOM 元素和JS 对象一起工作，制作出各种高性能，平滑过渡的动画效果。

http://www.animejs.cc/

(1)安装
npm install animejs
bower install animejs
(2)引入
import anime from 'animejs'
(3)使用

const myAnimation = anime({
   // 这里的this纸箱anime
   targets: '.duration-demo .el',
   translateX: `200px`,
   translateY: `200px`,
   easing: 'easeInOutQuad',
   duration: 1000,
   loop: false,
   complete() {
      // xxx
   },
   update() {
     // xxx
   }
});