animate CSS动画程序接口(仅Chrome可用)
jQuery中很早就提供了animate方法,使用它可以很方便地实现一些简单动画效果。后来CSS3中也提供了animation用于动画效果制作,但CSS本身的可操作性太差,所以用起来并不方便。现在最新版的Chrome原生支持了animate方法,弥补了CSS的操作缺陷。
元素上的animate方法有两个参数。第一个参数是动画的关键帧列表,是一个数组,每一个数组项都是一个JavaScript对象,可以在上面设置这个关键帧上元素的样式属性,并且使用offset属性表示这个关键帧在整条时间轴中的位置百分比;第二个参数是动画播放的配置参数,用于描述动画的时长、播放速度、过渡方式,等参数。从CSS的角度看,这个animate方法的第一个参数就是在创建keyframes,第二个参数是为元素添加animation样式属性。整个逻辑和CSS中使用animation没什么区别。
下面是使用的演示:运行,background:/,background:/,background:,background:, 函数除了可以调用之外还有返回值,这个animate方法会返回一个AnimationPlayer对象实例,它提供了一个onfinish事件和一个cancel方法,具体作用看名字就能猜到。
iterations:Infinity
}
);
};
</script>
我觉得这个方法将来会很有用,只是目前只有Chrome支持
animate CSS动画程序接口(仅Chrome可用)的更多相关文章
- animate.css动画种类
animate.css 一个非常好用的css动画库 Github地址 包括了一下多种动画 1. bounce 弹跳 2. flash 闪烁 3. pulse 放大,缩小 4. rubberBand 放 ...
- vue中使用transition和animate.css动画效果
一.单个动画中,使用div中引用animate动画 1.下载依赖 npm install animate.css –save 2.main.js中全局引用 import animate from 'a ...
- animate.css 动画的使用
$('#animatedClose').removeClass().addClass('fadeInDownBig animated').one('webkitAnimationEnd mozAnim ...
- animate.css动画
添加类名的时间不要只添加动画的类名,也要加上animated,使用的时间可以把自己需要的效果复制出来
- 【学习参考】Animate.css动画演示
学习参考地址: http://www.dowebok.com/demo/2014/98/
- CSS--使用Animate.css制作动画效果
一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画; <!DOCTYPE h ...
- wow.js+animate.css——有趣的页面滚动动画
今天偶然间发现了一个使用特别简单的页面动画效果,还挺不错的,玩了一个上午,现在介绍一下这个滚动动画: 一.使用方法: 1.下载animate.css 2.下载wow.js 3.引用文件,像这样: &l ...
- Animate.css介绍
Animate.css简介 animate.css 动画库,预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出 ...
- WOW.js 和 animate.css 使用
animate.css 动画样式,用户也可以非常容易修改设置喜欢的动画库. Wow.js 允许用户滚动页面的时候展示 CSS 动画.配合animate.css ,做出很棒的效果,它支持 animate ...
随机推荐
- PHP MySQL Select 之Select
从数据库表中选取数据 SELECT 语句用于从数据库中选取数据. 语法 SELECT column_name(s) FROM table_name 注释:SQL 语句对大小写不敏感.SELECT 与 ...
- mime大全收集
{"ai", "application/postscript"}, {"aif", "audio/x-aiff" ...
- 从一段代码看fork()函数及其引发的竞争
首先来看一段从<UNIX环境高级编程>中摘录的一段很有意思的代码.借此我们再来谈谈fork()函数的一些问题. #include "apue.h" static voi ...
- 登录DSCCC控制台报错提示:安装错误代码: 3
登录DSCCC控制台报错内容:读取安装配置时出错 检查目录服务控制中心状态时出现意外错误. 显示详细资料 隐藏详细资料 安装错误代码: 3 堆栈: com.sun.directory.common.s ...
- apache安装扩展模块
apache 安装扩展模块 1,首先要确认你是否加载了mod_so模块,这个就是你在编译前参数配置的时候添加-enable-so(启用DSO).如果你没有这模块的话,是无法安装扩展模块的. /usr/ ...
- onvif规范的实现:server端Discovery实现,通过OnvifTestTool12.06测试
说明:网上关于ONVIF开发的文章并不多,也更找不到具体的实例来入门学习.只能靠翻阅各种Specification摸索中前进,下面是最近几天的成果.调通了服务端(或者说设备端)的Discovery,使 ...
- synchronized关键字的用法
synchronized用于给方法或者块加锁用的,只有获得该对象或者块的锁的对象才能够执行里面的代码,否则将阻塞在那里,等待该锁被释放,然后获得该锁继续执行.比如下面模拟售票的代码: /** * 模拟 ...
- LINQ 操作符
using System; using System.Collections.Generic; using System.Text; using System.Linq; namespace LinQ ...
- android学习---屏幕旋转
/** *问题:今天学习android访问Servlet,Servlet给返回一个xml格式的字符串,android得到数据后将其显示到一个TextView中,发现Activity得到数据显 * 示到 ...
- C++程序设计实践指导1.7超长数列中n个数排序改写要求实现
改写要求1:将以上程序改写为适合超长整数 改写要求2:将以上程序改写为适合超长数列 改写要求3:将数列中指定位置m开始的n个结点重新按降序排序 改写要求4:输出指定位置m开始的n个结点的超长整数 #i ...