css3整理--Animation
animation语法:
1、动画的定义
@keyframes IDENT {
from { Properties:Properties value; }
Percentage { Properties:Properties value; }
to { Properties:Properties value; } }
或者全部写成百分比的形式:
@keyframes IDENT {
0% { Properties:Properties value; }
Percentage { Properties:Properties value; }
100% { Properties:Properties value; } }
其中 IDENT 是动画的名称,语义化即可。
from指定动画开始时的属性值,可以使用百分比代替
to指定动画结束时的属性值,也可以使用百分比代替
Percentag可以指定中间任意多个值,来指定动画的轨迹
2、动画的调用
animation-name:'wobble';/*动画属性名,也就是我们前面keyframes定义的动画名,支持指定多个动画,中间逗号分隔*/
animation-duration: 10s;/*动画持续时间*/
animation-timing-function: ease-in-out; /*动画频率,和transition-timing-function是一样的*/
animation-delay: 2s;/*动画延迟时间*/
animation-iteration-count: 10;/*定义循环资料,infinite为无限次*/
animation-direction: alternate;/*定义动画方式,alternate指动画执行偶数次时向前播放,奇数次时向后播放*/
最新文章
- 细说 Form (表单)
- ArcGIS 10.5新功能预览
- Java_ToolKit用法
- IOS----友盟推送详解
- Android异步回调中的UI同步性问题
- c/c++: c++继承 内存分布 虚表 虚指针 (转)
- 18种CSS3loading效果完整版,兼容各大主流浏览器,提供在线小工具使用
- JPush (极光推送) For Xamarin.Android
- C# WinForm使用Aspose.Cells.dll 导出导入Excel/Doc 完整实例教程
- 使用ExpandableListView时间轴效果达到
- for计算100以内的偶数和
- 性能调优之Java系统级性能监控及优化
- 201521123060《Java程序设计》第2周学习总结
- linux(3)磁盘与文件系统管理/查看硬盘、内存空间/文件系统的操作/ 文件的压缩和打包
- C# 控件拖动
- 不用第三方解码库取得图片宽高 附完整C++算法实现代码
- numpy使用指南
- python与MongoDB的基本交互:pymongo
- cannot be resolved. It is indirectly referenced from required .class files
- iterm2切换显示屏vim乱行解决
热门文章
- 查询返回JSON数据结果集
- GO开发环境搭建
- wxParse解析富文本内容使点击图片可以选中并实现放大缩小
- [Android]_[0基础]_[adb 有用命令]
- 解决PuppetDB Failed to submit 'replace facts'问题
- Android中Bundle和Intent的区别
- 【MySQL】MySQL视图创建、查询。
- 基于ubuntu搭建 WordPress 个人博客
- SQL Server 数据库基础笔记分享(上)
- Keepalived源码安装