animation 动画的定义和使用
2015-12-11 17:26
183 查看
@keyframes 定义动画
@keyframes myname{
0%{}
50%{}
100%{}
}
调用动画
.div{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
简写:
.div{
animation: myfirst 5s linear 2s infinite alternate;
}
参数说明:
@keyframes 规定动画。
animation 所有动画属性的简写属性,除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode 规定对象动画时间之外的状态。
一个兼容完善的例子如下:
.div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}
@keyframes myname{
0%{}
50%{}
100%{}
}
调用动画
.div{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
简写:
.div{
animation: myfirst 5s linear 2s infinite alternate;
}
参数说明:
@keyframes 规定动画。
animation 所有动画属性的简写属性,除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode 规定对象动画时间之外的状态。
一个兼容完善的例子如下:
.div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}
相关文章推荐
- 欢迎使用CSDN-markdown编辑器
- java代码重用的一点思考
- 动态加载js和css
- golang的ssh例子
- 数据库的整理
- Android中Activity的初步接触(一)
- C++ vector 经常用到的小知识
- oracle JOB常见的执行时间
- Android menu菜单介绍之子菜单
- 学习笔记:delphi之TStringGrid
- java.lang.NoClassDefFoundError的原因及解决
- GNU g++4.8.4编译支持c++11标准
- 蓝桥杯基础练习题十题
- 控制Linux kernel启动console的打印级别
- asynctask下载文件 保存到本地
- perl 解析JSON
- Oracle EBS 寄售业务总结
- <httpProtocol/>配置http协议头
- Eclipse tomcat server 无法添加项目
- 第十五章 枚举类型和位标志