css3 animate基本属性
Css3animate属性
属性 |
描述 |
Css |
Animation |
所有动画属性的简写属性,除了animation-play-state属性 Animation:name duration timing-function delay iteration-count direction; |
3 |
Animation-name |
规定@keyframes动画的名称。 animation-name:keyframename|none |
3 |
Animation-duration |
规定完成一个周期所花费的秒或毫秒。默认是0; Animation-duration:time; |
3 |
Animaion-timing--function |
规定动画的速度曲线。默认是ease。 |
3 |
Animation-delay |
规定动画何时开始。默认是0 Animation-delay:time |
3 |
Animation-iteration-count |
规定动画被播放的次数。默认是1. Animation-iteration-count:n|infinite |
3 |
Animation-direction |
规定动画是否在下一周期逆向的播放。默认是normal。 Normal是默认值。动画应该正常播放 Alternate动画应该轮流反向播放 |
3 |
Animation-play-state |
规定动画是否正在运行或暂停,默认值是”running”。 Animation-play-state:paused|running; Paused:规定动画已暂停 Running:规定动画正在播放 |
3 |
Css3@keyframes规则
语法:
@keyframe animationname{keyframes-selector{css-styles;}}
值 |
描述 |
Animationname |
必需,定义动画的名称 |
Keyframes-selector |
必需。动画时长的百分比。 合法值:0-100% From(与0%相同) To(100%相同) |
Css-styles |
必需。一个或多个合法的css样式属性 |
定格动画
值 |
描述 |
Animationend |
当animation执行完成后js调用的事件 |
Animationend |
Moz内核 |
webkitanimationEnd |
Webkit内核 |
oaimationEnd |
Opera内核 |
MSAnimationEnd |
Ie内核 |
值 |
描述 |
Transitionend |
当transition执行完成之后js调用的事件 |
Transitionenf |
Moz内核 |
webkittransitionEnd |
Webkit内核 |
otransitionEnd |
Opera内核 |
MSTransitionEnd |
IE内核 |
以上是animate的基本属性
css3 animate基本属性的更多相关文章
- css3 animate写的超炫3D转换
上一篇中介绍了animate的基本的属性,这一篇讲的则是关于animate以及transforms的使用 <!DOCTYPE html><html lang="en&quo ...
- 从小姐姐博客那里看到的流光文字(CSS3 animate)
对于流光文字,大家并不陌生,毕竟我们都经历过非主流的时代.你们卟懂绯紸流!色彩缤纷的QQ空间...... 还记得那些炫酷的签名档,或者那些炫酷的动态头像.不过大家对于流光文字的印象还是图片.那么在网页 ...
- css3 animate转圈360旋转
.logo{ width:20px; height: 20px; background: red; -webkit-animation:haha1 .8s linear infinite; anima ...
- animate.css – 齐全的CSS3动画库
animate.css – 齐全的CSS3动画库 演 示 下 载 简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounc ...
- animate.css –齐全的CSS3动画库--- 学习笔记
animate.css – 齐全的CSS3动画库 学习网站: https://daneden.github.io/animate.css/ http://www.dowebok.com/98.html ...
- animate.css(第三方动画使用方法)
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } animation 语法: animatio ...
- CSS3的新属性的一下总结
阮一峰:http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 由于自己经常搞混:animation,tran ...
- 如何方便的控制css3动画开始时间点与持续时间
一般我们在控制css3 animate动画时可以通过简写以减少代码量,只要在需要动画的元素上追加一下类名就可以了,如下例子 /*淡入并向上移动一点位置出现*/ .fadeInUp{ -webkit-a ...
- CSS3无前缀脚本prefixfree.js与Animatable使用
现代浏览器基本支持CSS3,但是一些旧版本的浏览器还是需要添加前缀的.像box-shadow, border-radius这类属性,目前较新版本的浏览器都是不需要前缀的(包括IE9),但是,有些CSS ...
随机推荐
- C# 禁止WebBrowser网页跳转时发出的声音
; const int SET_FEATURE_ON_PROCESS = 0x00000002; [DllImport("urlmon.dll")] [PreserveSig] [ ...
- 打包Python程序
我选择的是pyinstaller,(py2exe到目前为止只支持到Python3.4). 安装.如果能联网最后用pip.在cmd中输入pip install Pyinstaller.如果不能联网,可以 ...
- OpenCV边缘检测的详细参数调节
1. findCountours 转载于http://blog.sina.com.cn/s/blog_7155fb1a0101a90h.html findContours函数,这个函数的原型为: &l ...
- SLAM: 关于Orb_SLAM的使用小综述
0.ORB_SLAM的官方网站:http://webdiis.unizar.es/~raulmur/orbslam/ 1. 参考知乎上对 orb-slam 的评价:orb-slam在众多SLAM方法中 ...
- 【技术累积】【点】【java】【18】URLEncode
基础概念 由于以URL的形式传递信息给服务器时,不允许URL中出现一些特殊字符和空格的,所以需要对URL进行编码处理. 原理是: 将要转码的字符转变为16进制: 从右到左,每两位前面加% 哪些字符是需 ...
- pycharm,右键执行run unittests in xx.py后,__main__:后的代码没执行
如图所示:执行py文件后,打印__name__的名是模块名,而非__main__ 查了好久,发现这个问题跟unittest这个类有关系,执行单元测试的py脚本时,不要右键run unittest,在p ...
- CentOS7.4上搭建rocketMQ集群
一.rocketMQ集群部署方案优缺点对比: 多Master模式(2m-noslave) : 一个集群无Slave,全是Master,例如2个Master或者3个Master 优点:配置简单,单个Ma ...
- 【习题 4-4 UVA - 253】Cube painting
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 绕(x,y,z)三个轴旋转. 枚举x,y,z各4次的结果. (4次之后能还原.可以方便上一层枚举下一个情况.) [代码] #incl ...
- hdu 2444 交叉染色判断二分图+二分最大匹配
/*1A 31ms*/ #include<stdio.h> #include<string.h> #define N 300 int n; struct node { int ...
- 百度之星2014复赛 - 1001 - Find Numbers
先上题目: Find Numbers Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...