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提供一個(gè)動(dòng)畫的json，默認(rèn)的渲染方式是svg睹耐。
(1)npm install lottie-web
(2)lottie.vue

<template>
  <div ref="lavContainer"></div>
</template>

<script>
import lottie from 'lottie-web';

export default {
  name: 'lottie',
  props: {
    options: {
      type: Object,
      required: true
    },
    height: Number,
    width: Number,
  },
  data() {
    return {
      commonStyle: {
        width: '100%',
        height: '100%',
        overflow: 'hidden',
        margin: '0 auto'
      }
    }
  },
  watch: {
    options() {
      this.anim = lottie.loadAnimation({
        container: this.$refs.lavContainer,
        renderer: 'svg',
        loop: this.options.loop !== false,
        autoplay: this.options.autoplay !== false,
        animationData: this.options.animationData,
        rendererSettings: this.options.rendererSettings,
      });
      this.$emit('animCreated', this.anim)
    }
  },
  mounted() {
    this.anim = lottie.loadAnimation({
      container: this.$refs.lavContainer,
      renderer: 'svg',
      loop: this.options.loop !== false,
      autoplay: this.options.autoplay !== false,
      animationData: this.options.animationData,
      rendererSettings: this.options.rendererSettings,
    });
    this.$emit('animCreated', this.anim)
  },
}
</script>

(3）在組件內(nèi)引入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組件

<lottie
   class="xxx"
   :height="xxx"
   :options="defaultOptions"
   @animCreated="handleAnimation"
/>
// 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 是一款功能強(qiáng)大的Javascript 動(dòng)畫庫(kù)插件。anime.js 可以和CSS3 屬性，SVG，DOM 元素和JS 對(duì)象一起工作前翎，制作出各種高性能，平滑過(guò)渡的動(dòng)畫效果畅涂。

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
   }
});