参考: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 -动画实现的更多相关文章

  1. CSS3 animation 动画

    今天看到一个很酷的logo看了下他用的是animation 动画效果,就拿来做例子 浏览器支持 Internet Explorer 10.Firefox 以及 Opera 支持 animation 属 ...

  2. Android Property Animation动画

    3.0以前,android支持两种动画模式,tween animation,frame animation,在android3.0中又引入了一个新的动画系统:property animation,这三 ...

  3. css3 animation 动画属性简介

    animation 动画属性介绍 animation 属性是一个简写属性,用于设置动画属性: 1. animation-name----规定需要绑定到选择器的 keyframe 名称. 语法:anim ...

  4. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  5. android Animation 动画绘制逻辑

    参考:http://www.jianshu.com/p/3683a69c38ea 1.View.draw(Canvas) 其中步骤为:/* * Draw traversal performs seve ...

  6. 转 iOS Core Animation 动画 入门学习(一)基础

    iOS Core Animation 动画 入门学习(一)基础 reference:https://developer.apple.com/library/ios/documentation/Coco ...

  7. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  8. 【Android 基础】Animation 动画介绍和实现

    在前面PopupWindow 实现显示仿腾讯新闻底部弹出菜单有用到Animation动画效果来实现菜单的显示和隐藏,本文就来介绍下吧. 1.Animation 动画类型 Android的animati ...

  9. css3 transition属性变化与animation动画的相似性以及不同点

    下面列子中的2个图片的效果. http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html 第一个为transiti ...

  10. Android中xml设置Animation动画效果详解

    在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...

随机推荐

  1. jzoj4916. 【GDOI2017模拟12.9】完全背包问题 (背包+最短路)

    题面 题解 考场上蠢了--这么简单的东西都想不到-- 首先排序加去重. 先来考虑一下,形如 \[a_1x_1+a_2x_2+...a_nx_n=w,a_1<a_2<...<a_n,x ...

  2. [转]Log4j配置详解

    来自: http://www.blogjava.net/zJun/archive/2006/06/28/55511.html Log4J的配置文件(Configuration File)就是用来设置记 ...

  3. Qt(Mac) 进程的启动

    试了半天,终于成功了!!!!(教程都是Windows的) 1.与Windows不一样,Mac的要在了路径前加上open: 2.例 图为把一个按钮与TextEdit程序进程联系,点击后就可以启动Text ...

  4. 数据结构19: BF算法(普通模式匹配算法)

    判断两个串之间是否存在主串与子串的关系,这个过程称为串的模式匹配. 在串的模式匹配过程,子串 T 通常被叫做“模式串”. 普通的模式匹配(“BF”算法) 判断两个串是否存在子串与主串的关系,最直接的算 ...

  5. linux上传与下载

    首先必须安装xshell这个工具 使用xshell来操作服务非常方便,传文件也比较方便.就是使用rz,sz首先,服务器要安装了rz,szyum install lrzsz当然你的本地windows主机 ...

  6. 图像标注工具labelImg安装记录

    这里仅记载下labelImg的安装过程,因为有坑. 我的安装方式是从源码编译,环境ubuntu16.04,一开始是使用python2安装,从github上下载好源码,然后执行安装命令 sudo apt ...

  7. P2596 [ZJOI2006]书架(splay)

    [题目链接] https://www.luogu.org/problemnew/show/P2596 平衡树,需支持五个操作: 1. 将某元素置顶:将元素旋到根,然后将左子树合并到该元素的后继 2. ...

  8. 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_类型的各种成员

    [Class中,可能包含的成员] 常量, 字段, 实例构造器, 类型构造器, 方法, 操作符重载, 转换操作符, 属性, 事件, 类型(Class)

  9. 使用sqlmetal工具自动生成SQL数据库的Linq类文件

    第一部:找到sqlmetal.exe. 运行cmd. 执行命令 cd C:\Program Files (x86)\Microsoft SDKs\Windows\v8.1A\bin\NETFX 4.5 ...

  10. codeforces-777E Hanoi Factory (栈+贪心)

    题目传送门 题目大意: 现在一共有N个零件,如果存在:bi>=bj&&bj>ai的两个零件i,j,那么此时我们就可以将零件j放在零件i上.我们现在要组成一个大零件,使得高度 ...