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. Google Go 语言从入门到应用必备开源项目

    Go 语言于 2009 年 11 月正式宣布推出,成为开放源代码项目,发展至今已经具有越来越广泛的影响力,今年更是在 TIOBE 编程语言排行榜中跻身 20 强.很多开发者也逐渐将目光投向这门语言,本 ...

  2. tomcat建立虚拟主机

    WEB浏览器与WEBserver建立连接后,除了将请求URL中的资源路径发送给WEBserver外,还会将URL中的主机名部分作为HTTP请求消息的Host头发送给WEBserver.比如,在浏览器地 ...

  3. 【Android开发经验】LayoutInflater—— 你可能对它并不了解甚至错误使用

    今天,看到了一篇文章讲LayoutInflater的使用方法.瞬间感觉自己对这个类确实不够了解,于是简单的看了下LayoutInflater类的源码.对这个类有了新的认识. 首先.LayoutInfl ...

  4. Android Studio虚拟机配置虚拟键盘

    1. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2pjMjExMzIy/font/5a6L5L2T/fontsize/400/fill/I0JBQkF ...

  5. Android 自己的自动化测试(4)&lt;uiautomator&gt;

    在前面的系列文章.我与介绍java实现 Android 自己主动化測试(1)怎样安装和卸载一个应用(java).Android 自己主动化測试(2)依据ID查找对象(java):然后又介绍了用pyth ...

  6. iOS开发面试题整理(二)

    8 类别的作用?继承和类别在实现中有何区别? 答案:category 可以在不获悉,不改变原来代码的情况下往里面添加新的方法,只能添加,不能删除修改. 并且如果类别和原来类中的方法产生名称冲突,则类别 ...

  7. ASP.NET MVC学习之路由篇

    约束路由 上面我们有一个{id}用来捕获参数的,但是你也发现了它可以捕捉任何字符串等等,但是我们有时需要限制它,比如让它只能输入数字,那么我们就可以使用正则表达式去约束它. 如下修改RouteConf ...

  8. nodejs中的 Cannot read property'text' of undefined 问题

    接触nodejs时间不久,最近遇到了这个问题,经过查阅资料以及百度终于解决了.

  9. stuts1:(Struts)Action类及其相关类

    org.apache.struts.action.Action类是Struts的心脏,也是客户请求和业务操作间的桥梁.每个Action类通常设计为代替客户完成某种操作.一旦正确的Action实例确定, ...

  10. (原)matlab中使用mex编译多个cpp文件

    以前一直是mex一个文件.刚才需要编译多个文件(如a.cpp调用b.cpp的函数,b.cpp调用c.cpp的函数).如果只是mex a.cpp,提示函数找不到函数. 突然想到mex c.cpp b.c ...