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 ...
随机推荐
- Eclipse文件覆盖问题
window-preferences-General-Search找到第一行的一个选项 Reuse editors to show matches他的意思是说在同一个编辑里面显示匹配的文件,如果后面有 ...
- Co-prime Array&&Seating On Bus(两道水题)
Co-prime Array Time Limit:1000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Su ...
- LeetCode——Reverse Words in a String
Given an input string, reverse the string word by word. For example, Given s = "the sky is blue ...
- Sublime Text 2 介紹
代码编辑器或者文本编辑器,对于程序猿来说,就像剑与战士一样,谁都想拥有一把能够随心驾驭且瑞丽无比的宝剑,而每一位程序猿,相同会去追求最适合自己的强大.灵活的编辑器,相信你和我一样,都不会例外. 我用过 ...
- 使用nodeitk进行角点检測
前言 东莞,晴,33至27度.今天天气真好,学生陆续离开学校.忙完学生答辩事情,最终能够更新一下nodeitk.本文继续介绍node的特征识别相关内容,你会看到,採用nodeitk实现角点检測是一件十 ...
- linux下 /etc/profile、~/.bash_profile ~/.profile的执行过程
关于登录linux时,/etc/profile.~/.bash_profile等几个文件的执行过程. 在登录Linux时要执行文件的过程如下: 在刚登录Linux时,首先启动 /etc/profile ...
- UVA 12125 March of the Penguins
题意: 给定一些冰块,每个冰块上有一些企鹅,每个冰块有一个可以跳出的次数限制,每个冰块位于一个坐标,现在每个企鹅跳跃力为d,问所有企鹅能否跳到一点上,如果可以输出所有落脚冰块,如果没有方案就打印-1 ...
- sql server保留小数解决方法
在数据库中,我们有时会用到小数,怎样在数据库中转化小数呢,下面是一些常用的方法. 1.使用Round(字段名/数字,小数保留位数)方法,如下所示: select Round(3.333,2) 结果如下 ...
- No DEFAULT or UI configuration directive found!
虚拟机安装OracleLinux出错: No DEFAULT or UI configuration directive found! 解决方法:我使用第一条就成功了 在报错信息后面的boot命令行输 ...
- 计算UILabel的高度
//计算文本高度 NSString *lltxt =[[NSString alloc]initWithFormat:@"浏览:%@",[strJson objectForKey:@ ...