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 ...
随机推荐
- swift中通知的使用
1.发通知.(以这条通知为例,通知名字:gameOverNotification.通知参数:title) NSNotificationCenter.defaultCenter().postNotifi ...
- hdu2095 像水题的不错题 异或运算
异或运算的基础有点忘记了 先介绍一下..2个数异或 就是对于每一个二进制位进行位运算 具有2个特殊的性质 1.一个数异或本身恒等于0,如5^5恒等于0: 2.一个数异或0恒等于本身,如5^0恒等于5. ...
- android stagefright基本流程总结
数据流的封装一. 由数据源DataSource生成MediaExtractor. 通过MediaExtractor::Create(dataSource)来实现.Create方法通过两步来生成相应的M ...
- webapi单元测试时出现的ConfigurationManager.ConnectionStrings为空错误
这个是读取配置文件没读到的问题,解决方法很简单,把webapi的配置文件复制到单元测试项目中,并把名字改为App.config即可. 同时 ,推荐使用Unit Test Genertor来做测试,这个 ...
- android中页面的返回刷新
android中从A activity 打开B activity 操作之后返回A activity,并且A activity状态改变就要用到刷新 我就介绍一下我开发中最常用的方法 引用函数 setRe ...
- 疯狂Android第二章:Adapter以及部分控件使用
第二章 重点:1.理解View以及各种布局的优缺点,适用场景. 2.熟练掌握adapter原理与用法. 3.熟悉其它控件的基本使用方法. /////////////////////////////// ...
- windows8开发学习笔记
XAML行列定义 <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> &l ...
- [转载]ACM(访问控制模型),Security Identifiers(SID),Security Descriptors(安全描述符),ACL(访问控制列表),Access Tokens(访问令牌)
对于<windows核心编程>中的只言片语无法驱散心中的疑惑.就让MSDN中的解释给我们一盏明灯吧.如果要很详细的介绍,还是到MSDN仔细的看吧,我只是大体用容易理解的语言描述一下. wi ...
- c语言-函数的定义及传参
模块化编程 定义: 数据类型 函数名(型参):如果没有数据类型,默认的为int 值传递 地址传递 嵌套调用 递归调用:直接或间接调用本身函数,求可能栈破裂,求阶乘 #include <stdio ...
- [转]Linux下转换字符集(UTF8转换)
今天在Linux 下使用 Iconv 命令转换一个UTF8文件时,总是转换不成功.提示: iconv: 未知 0 处的非法输入序列 后来使用 man iconv 查看,还是没发现异常,因为命令格式都是 ...