參考：https://github.com/HenrikJoreteg/create-keyframe-animation

實例

var animations = require(‘create-keyframe-animation‘)

新建動畫：

animations.registerAnimation({
　　name: ‘move‘,//動畫名稱
　　animation: [ //實現的動畫效果
　　　　0: {transform: `translate3d(${x}px,${y}px,0) scale(${scale})` },
　　　　60: {transform: `translate3d(0,0,0) scale(1.1)` },

　　　　100: {transform: `translate3d(0,0,0) scale(1)` }
　　],
　　presets: {
　　　　duration: 1000, // 持續時間
　　　　fillMode: ‘both‘, // css3 animation 的 fill-mode 屬性
　　　　easing: ‘ease‘, // 動畫的效果 default easing
　　　　iterations: 1, // 實現動畫的次數
　　　　delay: 0, // 延遲
　　　　direction: ‘normal‘, // 方向
　　　　resetWhenDone: false, // if true ：將最後動畫狀態應用為“變換”屬性

　　　　clearTransformsBeforeStart: false // 是否在動畫開始之前清除現有的轉換
　　}
})

使用：

animations.runAnimation(document.querySelectorAll(‘.dots‘), ‘move‘,function(){})

.runAnimation(element(s), name string or options object, [callback])

　　返回一個 promise

• 參數element ： 可以是一個單一的元素，元素或querySelectorAll結果數組
• 參數name：

如果是字符串，那麽就是registerAnimation定義的動畫名稱

如果傳遞對象，它必須包含名稱，例子：

animations.runAnimation(document.querySelectorAll(‘.dots‘), {
　　name: ‘wiggle‘,
　　delay: 1500 // 在這裏，我們可以重寫如上所述的任何預置選項
}, function () {}

• callback 回調

（生產）create-keyframe-animation -動畫實現