jQuery中很早就提供了animate方法,使用它可以很方便地实现一些简单动画效果。后来CSS3中也提供了animation用于动画效果制作,但CSS本身的可操作性太差,所以用起来并不方便。现在最新版的Chrome原生支持了animate方法,弥补了CSS的操作缺陷。
  元素上的animate方法有两个参数。第一个参数是动画的关键帧列表,是一个数组,每一个数组项都是一个JavaScript对象,可以在上面设置这个关键帧上元素的样式属性,并且使用offset属性表示这个关键帧在整条时间轴中的位置百分比;第二个参数是动画播放的配置参数,用于描述动画的时长、播放速度、过渡方式,等参数。从CSS的角度看,这个animate方法的第一个参数就是在创建keyframes,第二个参数是为元素添加animation样式属性。整个逻辑和CSS中使用animation没什么区别。
  下面是使用的演示:
运行,background:/,background:/,background:,background:,
      iterations:Infinity
    }
  );
};
</script>
  函数除了可以调用之外还有返回值,这个animate方法会返回一个AnimationPlayer对象实例,它提供了一个onfinish事件和一个cancel方法,具体作用看名字就能猜到。

  我觉得这个方法将来会很有用,只是目前只有Chrome支持

animate CSS动画程序接口(仅Chrome可用)的更多相关文章

  1. animate.css动画种类

    animate.css 一个非常好用的css动画库 Github地址 包括了一下多种动画 1. bounce 弹跳 2. flash 闪烁 3. pulse 放大,缩小 4. rubberBand 放 ...

  2. vue中使用transition和animate.css动画效果

    一.单个动画中,使用div中引用animate动画 1.下载依赖 npm install animate.css –save 2.main.js中全局引用 import animate from 'a ...

  3. animate.css 动画的使用

    $('#animatedClose').removeClass().addClass('fadeInDownBig animated').one('webkitAnimationEnd mozAnim ...

  4. animate.css动画

    添加类名的时间不要只添加动画的类名,也要加上animated,使用的时间可以把自己需要的效果复制出来

  5. 【学习参考】Animate.css动画演示

    学习参考地址: http://www.dowebok.com/demo/2014/98/

  6. CSS--使用Animate.css制作动画效果

    一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画;   <!DOCTYPE h ...

  7. wow.js+animate.css——有趣的页面滚动动画

    今天偶然间发现了一个使用特别简单的页面动画效果,还挺不错的,玩了一个上午,现在介绍一下这个滚动动画: 一.使用方法: 1.下载animate.css 2.下载wow.js 3.引用文件,像这样: &l ...

  8. Animate.css介绍

    Animate.css简介 animate.css 动画库,预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出 ...

  9. WOW.js 和 animate.css 使用

    animate.css 动画样式,用户也可以非常容易修改设置喜欢的动画库. Wow.js 允许用户滚动页面的时候展示 CSS 动画.配合animate.css ,做出很棒的效果,它支持 animate ...

随机推荐

  1. cocos2dx lua 学习笔记(二)

    安装开发环境 sublime - http://www.sublimetext.com/2 package control - http://packagecontrol.io/installatio ...

  2. UGUI 滚动视图

    滚动视图是常用的UI控件之一,它是由多个基本控件组合而成.如图 ==================================================================== ...

  3. centos 6 编译安装httpd-2.4

    centos6 yum安装的apr版本已经不适用httpd-2.4版本了.所以,需要源码编译apr以及apr-util 1. 下载源码: cd /usr/local/src/ wget http:// ...

  4. Android Audio System 之一:AudioTrack如何与AudioFlinger

    Android Framework的音频子系统中,每一个音频流对应着一个AudioTrack类的一个实例,每个AudioTrack会在创建时注册到 AudioFlinger中,由AudioFlinge ...

  5. sql必知必会(第四版) 学习笔记二 视图

    本书用到的几个表的建表sql语句如下: --销售产品供应商 CREATE TABLE Vendors ( vend_id varchar(20) not null, vend_name varchar ...

  6. <runtime> 的 <assemblyIdentity> 元素和<bindingRedirect> 元素

    1.<assemblyIdentity> 元素 包含关于该程序集的标识信息. <assemblyIdentity name="assembly name" pub ...

  7. 什么时候会刷新备库控制文件refresh the standby database control file?

    通过合理的设置,对于Primary的绝大数操作,都是可以传递到Physical Standby,datafile的操作是通过STANDBY_FILE_MANAGEMENT参数来控制的,但是即使STAN ...

  8. C# HTML转换为WORD

    使用aspose.words仅需要4句代码,即可搞定. Document doc = new Document(); DocumentBuilder builder = new DocumentBui ...

  9. 重写QSqlTableModel的flags函数实现tableview中某些列不可编辑,某些可以编辑

    Qt中使用QsqlTableModel和QTableView来显示数据库的查询结果是非常方便的,但是为了使QTableView中某些了列不可用,就需要重写 Qt::ItemFlags flags(co ...

  10. inflate, findViewById与setContentView的区别与联系

    protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentV ...