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. apache启动问题: Could not reliably determine the server's fully qualified domain name

    [root@rusky]# service httpd startStarting httpd: httpd: apr_sockaddr_info_get() failed for ruskyhttp ...

  2. [Python笔记][第三章Python选择与循环]

    1月28日学习 Python选择与循环 选择结构 多分枝选择结构 if 表达式 1: 语句块 1 elif 表达式 2: 语句块 2 elif 表达式 3: 语句块 3 ... else : 语句块 ...

  3. Android Studio Errors

    1.The import org.apache.http.client; tip: cannot be resolved; resolve: add this line in build.gradle ...

  4. Makefiles 介绍

    http://www-personal.umich.edu/~ppannuto/writings/makefiles.html Makefiles Makefiles (or, the GNU aut ...

  5. 用canvas绘制一个时钟

    实现一个时钟的绘制和时间的显示 一,首先是页面的搭建html部分以及一点点的css代码,因为css这块用的比较少,所以就没有单独出来: <!DOCTYPE html> <html l ...

  6. 增加配置Apache2 管理 SVN 访问权限

    继续之前的 文章里的配置 配置Apache2 管理 SVN 一.修改配置/etc/httpd/conf.d/ subversion.conf <Location /svn/> DAV sv ...

  7. wamp出现问题#1045 - Access denied for user 'root'@'localhost' (using password: NO)的解决方法

    打开wamp->apps->phpmyadmin目录下面的config.inc.php文件 cfg['Servers'][$i]['verbose'] = 'localhost';$cfg ...

  8. redis 未授权漏洞利用直接登录服务器

    在没有查到杀手之前我是先把带宽&端口用iptables 做了限制这样能保证我能远程操作服务器才能查找原因 2 在各种netstat –ntlp  的查看下没有任何异常 在top 下查到了有异常 ...

  9. Android 展示键盘时候布局被修改的问题

    解决方法,在mainfest.xml中,对那个Activity加: <activity android:name=".activity.HomeActivity"androi ...

  10. IBM Minus One(water)

    IBM Minus One Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...