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 ...
随机推荐
- easy ui 如何单个引用其中某个插件?
记录一下这个方法,前端时间一直在纠结这个问题,后来听一些前辈讲解后才恍然大悟,要单独引用某个插件,我们需要重视的是:easyloaer.js ,easy ui的下载包中也有easyloader的dem ...
- tomcat-maven-plugin 插件使用
配置 在pom.xm 加入以下xml. <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId&g ...
- SQL Server 性能小点
1. 对索引列使用Like语句, 如果是"Like 'aa%'"则使用索引优化, 若是"Like '%aa'"则不使用索引优化. 2. "[Age] ...
- Sqlserver系列(三) 小技巧
(1)取别名 as 省略 as XX= select 'a' as name select 'a' name select name='a' 示例
- Spring 入门 Ioc-Xml
通过一个小例子演视怎么通过 Spring 往程序中注入对象,而非手动 new 对象. 一.导入 Spring 所需要的包 spring-framework-2.5.6 版需要导入以下包: 1.---- ...
- ASP.NET MVC请求特殊静态文件返回404 Not Found
今天在请求静态的json档案以及woff2档案,会返回404错误,需要在Web.Config里修改: <system.webServer> <modules> <remo ...
- NSString 字符串操作
//一.NSString /*----------------创建字符串的方法----------------*/ //1.创建常量字符串. NSString *astring = @"Th ...
- HDU 5806 - NanoApe Loves Sequence Ⅱ (BestCoder Round #86)
若 [i, j] 满足, 则 [i, j+1], [i, j+2]...[i,n]均满足 故设当前区间里个数为size, 对于每个 i ,找到刚满足 size == k 的 [i, j], ans + ...
- SDK编程模板
#include<Windows.h> LRESULT CALLBACK WndProc(HWND,UINT,WPARAM,LPARAM); int WINAPI WinMain(HINS ...
- annotation 不给提示
window---preferences---content assist(java)--添加@