一、animation的用法

（css版)animation: name duration timing-function delay iteration-count direction;
（js版）object.style.animation="name duration timing-function delay iteration-count direction"

animation:mymove 5s infinite;
解析（mymove☞animation-name，5s☞animation-duration，infinite☞animation-iteration-count。）

@keyframes mymove
{
from {left:0px;}      
from{background：#000；top：10px；}
to {left:200px;}     
to{background：#fff；top：10px}改变颜色位置不变。(亲测有效)
}

二、velocity的用法

http://shouce.jb51.net/velocity/index.html
首先，相较于css的animation动画来说，Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。性能高于CSS3 animation，并支持所有的现代浏览器。

语言背景：vue

首先引入script或者npm install安装

  <script src="../lib/velocity.min.js"></script>
  npm install velocity-animate

demo1：vue的内置组件<transition>和velocity结合

<template>
  <div>
    <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @leave="leave"
          >
        <div>示例demo1</div>
    </transition>
</template>

<script>
import Velocity from "velocity-animate";
export default {
  beforeEnter: function(el) {
      el.style.opacity = 0;
      el.style.minHeight = 0;
    },
  enter: function(el, done) {
      Velocity(
        el,
        { opacity: 1, height: "50%" },
        { complete: done, duration: 2000, delay: 1000 }
      );
    },
    // 点完之后继续显示2秒之后再离开
    leave: function(el, done) {
      Velocity(
        el,
        { opacity: 0.3, height: 0 },
        { complete: done, duration: 1000 }
      );
    },
}
</script>

demo2：根据文档走向，

<template>
  <div
      class="flower"
      ref="flower"
       >
  <!-- 手 -->
       <div class="hand"></div>
   </div>
</template>

<script>
import Velocity from "velocity-animate";
export default {
  preload: function() {
      // 太阳花动态
      Velocity(
        this.$refs["flower"],
        {
          translateX: 0,
          translateY: 0,
          scale: 1,
          opacity: 1
        },
        {
          duration: 2000,
          easing: "easeOutQuard",
          loop: 1,
          complete: () => {}
        }
      );
     // this.loadMusic();
    },
}
</script>