http://www.w3chtml.com/css3/rules/@keyframes.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>@keyframes_CSS参考手册_web前端开发参考手册系列</title>
<style>
#sport{position:relative;width:500px;height:400px;border:1px solid #ddd;}
#staff{position:absolute;z-index:3;bottom:10px;left:10px;overflow:hidden;width:180px;height:8px;border-radius:3px;background:#ddd;line-height:20;
-moz-animation:staff 3s linear;
-webkit-animation:staff 3s linear;
-o-animation:staff 3s linear;
-ms-animation:staff 3s linear;
animation:staff 3s linear;
}
#ball{position:absolute;z-index:3;bottom:20px;left:90px;overflow:hidden;width:30px;height:30px;border-radius:15px;box-shadow:0 0 10px rgba(204,102,0,.8);background:#F6D66E;background:-moz-linear-gradient(top,#fff,#F6D66E);background:-webkit-linear-gradient(top,#fff,#F6D66E);background:-o-linear-gradient(top,#fff,#F6D66E);background:-ms-linear-gradient(top,#fff,#F6D66E);background:linear-gradient(top,#fff,#F6D66E);line-height:20;
-moz-animation:ball 3s linear;
-webkit-animation:ball 3s linear;
-o-animation:ball 3s linear;
-ms-animation:ball 3s linear;
animation:ball 3s linear;
}
@-moz-keyframes ball{
0%{-moz-transform:translate(0,0);}
5%{-moz-transform:translate(-90px,-100px);}
18%{-moz-transform:translate(0,-350px);}
35%{-moz-transform:translate(200px,0);}
46%{-moz-transform:translate(380px,-160px);}
60%{-moz-transform:translate(250px,-350px);}
78%{-moz-transform:translate(60px,0);}
100%{-moz-transform:translate(0,0);}
}
@-webkit-keyframes ball{
0%{-webkit-transform:translate(0,0);}
5%{-webkit-transform:translate(-90px,-100px);}
18%{-webkit-transform:translate(0,-350px);}
35%{-webkit-transform:translate(200px,0);}
46%{-webkit-transform:translate(380px,-160px);}
60%{-webkit-transform:translate(250px,-350px);}
78%{-webkit-transform:translate(60px,0);}
100%{-webkit-transform:translate(0,0);}
}
@-o-keyframes ball{
0%{-o-transform:translate(0,0);}
5%{-o-transform:translate(-90px,-100px);}
18%{-o-transform:translate(0,-350px);}
35%{-o-transform:translate(200px,0);}
46%{-o-transform:translate(380px,-160px);}
60%{-o-transform:translate(250px,-350px);}
78%{-o-transform:translate(60px,0);}
100%{-o-transform:translate(0,0);}
}
@-ms-keyframes ball{
0%{-ms-transform:translate(0,0);}
5%{-ms-transform:translate(-90px,-100px);}
18%{-ms-transform:translate(0,-350px);}
35%{-ms-transform:translate(200px,0);}
46%{-ms-transform:translate(380px,-160px);}
60%{-ms-transform:translate(250px,-350px);}
78%{-ms-transform:translate(60px,0);}
100%{-ms-transform:translate(0,0);}
}
@keyframes ball{
0%{transform:translate(0,0);}
5%{transform:translate(-90px,-100px);}
18%{transform:translate(0,-350px);}
35%{transform:translate(200px,0);}
46%{transform:translate(380px,-160px);}
60%{transform:translate(250px,-350px);}
78%{transform:translate(60px,0);}
100%{transform:translate(0,0);}
}
@-moz-keyframes staff{
0%{-moz-transform:translate(0,0);}
6%{-moz-transform:translate(260px,0);}
20%{-moz-transform:translate(300px,0);}
30%{-moz-transform:translate(300px,0);}
40%{-moz-transform:translate(200px,0);}
65%{-moz-transform:translate(40px,0);}
79%{-moz-transform:translate(0,0);}
100%{-moz-transform:translate(0,0);}
}
@-webkit-keyframes staff{
0%{-webkit-transform:translate(0,0);}
6%{-webkit-transform:translate(260px,0);}
20%{-webkit-transform:translate(300px,0);}
30%{-webkit-transform:translate(300px,0);}
40%{-webkit-transform:translate(200px,0);}
65%{-webkit-transform:translate(40px,0);}
79%{-webkit-transform:translate(0,0);}
100%{-webkit-transform:translate(0,0);}
}
@-o-keyframes staff{
0%{-o-transform:translate(0,0);}
6%{-o-transform:translate(260px,0);}
20%{-o-transform:translate(300px,0);}
30%{-o-transform:translate(300px,0);}
40%{-o-transform:translate(200px,0);}
65%{-o-transform:translate(40px,0);}
79%{-o-transform:translate(0,0);}
100%{-o-transform:translate(0,0);}
}
@-ms-keyframes staff{
0%{-ms-transform:translate(0,0);}
6%{-ms-transform:translate(260px,0);}
20%{-ms-transform:translate(300px,0);}
30%{-ms-transform:translate(300px,0);}
40%{-ms-transform:translate(200px,0);}
65%{-ms-transform:translate(40px,0);}
79%{-ms-transform:translate(0,0);}
100%{-ms-transform:translate(0,0);}
}
@keyframes staff{
0%{transform:translate(0,0);}
6%{transform:translate(260px,0);}
20%{transform:translate(300px,0);}
30%{transform:translate(300px,0);}
40%{transform:translate(200px,0);}
65%{transform:translate(40px,0);}
79%{transform:translate(0,0);}
100%{transform:translate(0,0);}
}
</style>
</head>
<body>
<div id="sport">
<span id="ball">弹球</span>
<span id="staff">滑杆</span>
</div>
</body>
</html>

CSS3 @keyframes 语法的更多相关文章

CSS3 @keyframes 规则
今天来给大家分享一下CSS3 @keyframes 规则! 在你了解CSS3 @keyframes 规则时我先来给大家说说什么是css3中的动画动画是使元素从一种样式逐渐变化为另一种样式的效果. 您 ...
css3 @keyframes、transform详解与实例
一.transform 和@keyframes动画的区别: @keyframes动画是循环的,而transform 只执行一遍. 二.@keyframes CSS3中添加的新属性animation是用 ...
CSS3 @keyframes 动画
CSS3的@keyframes,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3的动画属性下面的表格列出了 @keyframes 规则和所有动画属性: 浏览器支持表 ...
animation css3动画与CSS3 @keyframes担配使用创建往复平缓动画
通过 @keyframes 规则,您能够创建动画. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式. 在动画过程中,您能够多次改变这套 CSS 样式. 以百分比来规定改变发生的时间,或者通 ...
CSS3 keyframes动画实现弹跳效果
首先,“回到顶部”.“用户反馈”这两个按钮是通过定位放在左下角上. (1)“回到顶部”的按钮只有当滚动条有出现下滑时才出现 (2)“用户反馈”按钮,用户刚打开时会抖动一下,引起用户的注意,然后才定住. ...
CSS3 @keyframes 用法（简单动画实现）
定义: 通过 @keyframes 规则,能够创建动画. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式. 在动画过程中,可以多次改变这套 CSS 样式. 以百分比来规定改变发生的时间,或 ...
CSS3 - @keyframes
语法 @keyframes animationname { keyframes-selector {css-styles;} } 值描述 animationname 必需.定义动画的名称. keyf ...
css3 @keyframes用法
使用@keyframes规则,可以创建动画. 在动画的过程中,可以多次更改css样式的设定. 对于指定的变化:发生时用0%,或关键字“from”和“to”,这与0%和100%相同. 0%:开头动画. ...
CSS3 @keyframes 规则以及animation介绍和各种动画样式说明
一个好网站:http://www.jqhtml.com/ 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规 ...

随机推荐

Bash For Loop Examples for Your Linux Shell Scripting--ref
There are two types of bash for loops available. One using the “in” keyword with list of values, ano ...
oracle学习----逻辑读
1.物理读当数据块第一次读取到,就会缓存到buffer cache 中,而第二次读取和修改该数据块时就在内存buffer cache 清空数据缓冲区 SQL> alter session se ...
JVM笔记5：Class文件结构
Class文件是一组以8位字节为基础单位的二进制流,包含多个数据项目(数据项目的顺序,占用的字节数均由规范定义),各个数据项目严格按照顺序紧凑的排列在Class文件中,不包含任何分隔符,使得整个Cla ...
angularjs + springmvc 上传和下载
jsp: <form ng-submit="uploadFile()" class="form-horizontal" enctype="mul ...
C# 内存法图像处理
内存法通过把图像储存在内存中进行处理,效率大大高于GetPixel方法,安全性高于指针法. 笔者当初写图像处理的时候发现网上多是用GetPixel方法实现,提到内存法的时候也没有具体实现,所以笔者在这 ...
js判断主流浏览器类型和版本号
如今的互联网中,浏览器可以说是太多太多了,但是大部分都是换壳不换心,基本上主流的浏览器还是火狐,谷歌,IE,safrai这几种比较常见,所以在我们的开发中,有时候需要遇到判断用户正在使用什么浏览器以及 ...
第3章 Struts2框架--2、完整的Struts2框架应用实例
1.建立一个Dynamic Web project,项目名:UserManager,把Struts2所必需的JAR复制到项目WEB-INF/lib目录下 2.修改web.xml文件,在web.xml文 ...
BCEC手动验证业务方法
在每次割接或业务调整后手动执行并做好业务验证工作一.研发区利用ansible手动执行巡检程序: 步骤1:登陆 10.254.3.4/opt/ansible 步骤2:手动执行 sh compute_c ...
OpenCV(4)-图像掩码操作（卷积）--平滑处理
卷积定义矩阵的掩码操作即对图像进行卷积.对图像卷积操作的意义为:邻近像素对(包括该像素自身)对新像素的影响:影响大小取决于卷积核对应位置值得大小. 例如:图像增强可以使用 \[ I(i,j)=5*I ...
九度OJ 1019 简单计算器 -- 2006年浙江大学计算机及软件工程研究生机试真题
题目地址:http://ac.jobdu.com/problem.php?pid=1019 题目描述: 读入一个只包含 +, -, *, / 的非负整数计算表达式,计算该表达式的值. 输入: ...

CSS3 @keyframes 语法

CSS3 @keyframes 语法的更多相关文章

随机推荐

热门专题