2016年11月10日--CSS动画
jquery动画：http://www.w3school.com.cn/jquery/jquery_animate.asp
CSS3动画教程1：http://www.w3school.com.cn/css3/css3_animation.asp
CSS3动画教程2：http://www.runoob.com/css3/css3-animations.html
.
CSS3的动画属性
下面的表格列出了 @keyframes 规则和所有动画属性：
| 属性 | 描述 | CSS |
|---|---|---|
| @keyframes | 规定动画。 | 3 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 | 3 |
| animation-name | 规定 @keyframes 动画的名称。 | 3 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 | 3 |
| animation-delay | 规定动画何时开始。默认是 0。 | 3 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | 3 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 | 3 |
运行下面的动画，其中设置了所有动画属性：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Firefox: */
-moz-animation-name:myfirst;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
/* Opera: */
-o-animation-name:myfirst;
-o-animation-duration:5s;
-o-animation-timing-function:linear;
-o-animation-delay:2s;
-o-animation-iteration-count:infinite;
-o-animation-direction:alternate;
-o-animation-play-state:running;
} @keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
} @-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
} @-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
} @-o-keyframes myfirst /* Opera */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body> <p><b>注释：</b>本例在 Internet Explorer 中无效。</p> <div></div> </body>
</html>
2016年11月10日--CSS动画的更多相关文章
- 2016年11月10日 星期四 --出埃及记 Exodus 20:1
2016年11月10日 星期四 --出埃及记 Exodus 20:1 And God spoke all these words: 神吩咐这一切的话说,
- 2016年11月19日 星期六 --出埃及记 Exodus 20:10
2016年11月19日 星期六 --出埃及记 Exodus 20:10 but the seventh day is a Sabbath to the LORD your God. On it you ...
- 2016年12月10日 星期六 --出埃及记 Exodus 21:5
2016年12月10日 星期六 --出埃及记 Exodus 21:5 "But if the servant declares, `I love my master and my wife ...
- 2016年11月30日 星期三 --出埃及记 Exodus 20:21
2016年11月30日 星期三 --出埃及记 Exodus 20:21 The people remained at a distance, while Moses approached the th ...
- 2016年11月29日 星期二 --出埃及记 Exodus 20:20
2016年11月29日 星期二 --出埃及记 Exodus 20:20 Moses said to the people, "Do not be afraid. God has come t ...
- 2016年11月28日 星期一 --出埃及记 Exodus 20:19
2016年11月28日 星期一 --出埃及记 Exodus 20:19 and said to Moses, "Speak to us yourself and we will listen ...
- 2016年11月27日 星期日 --出埃及记 Exodus 20:18
2016年11月27日 星期日 --出埃及记 Exodus 20:18 When the people saw the thunder and lightning and heard the trum ...
- 2016年11月26日 星期六 --出埃及记 Exodus 20:17
2016年11月26日 星期六 --出埃及记 Exodus 20:17 "You shall not covet your neighbor's house. You shall not c ...
- 2016年11月25日 星期五 --出埃及记 Exodus 20:16
2016年11月25日 星期五 --出埃及记 Exodus 20:16 "You shall not give false testimony against your neighbor.不 ...
随机推荐
- putty配色方案
最近用腻了putty默认的配色方案,所以打算换一下配色. 使用的是修改注册表的方法. 1.打开注册表:运行——>regedit 2.找到对应的注册表文件,并导出:注册表地址 HKEY_CURRE ...
- python 内建函数setattr（） getattr（）
python 内建函数setattr() getattr() setattr(object,name,value): 作用:设置object的名称为name(type:string)的属性的属性值为v ...
- 《深入理解bootstrap》读书笔记：第4章 CSS组件（上）
bootstrap三大核心之二. 包括glyphicon图标,下拉菜单(dropdown),按钮组(button group)....等等. 一. 图标字体 bootstrap3提供了200多个免费图 ...
- C#和SQL实现的字符串相似度计算代码分享
http://www.jb51.net/article/55941.htm C#实现: 复制代码 代码如下: #region 计算字符串相似度 /// <summary> ...
- Python之路【第十篇】Python操作Memcache、Redis、RabbitMQ、SQLAlchemy、
Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度 ...
- css书写规则总结
1. JavaScript钩子使用的class不能是css class,要加j或j-前缀 2. 选择器 2.1 css选择器尽量简短,层级要少,最好是1-2层 例如:.nav{} 优于 ul.nav{ ...
- Asp.Mvc中的text实现 辅助用户输入 灰色字体
在开发Web应用程序中经常需要用户在文本框输入信息,为了提高程序人性化设置以及用户体验效果常常需要在文本框中显示灰色字体辅助用户输入 如:
- linux下vim更改注释颜色
我linux下默认底色是黑色,字体是绿色,但是注释默认是蓝色,,很不爽...所以要更改注释颜色......以下文章来自转载. from: http://blog.csdn.net/gz109/arti ...
- firefox如何卸载插件plugins和临时文件夹
下载原版的 英文版的 firefox 会看到 openH264 video codec Plugin和microsoft DRM (digit rightcopy manager 数字版权管理)等等插 ...
- Todd's Matlab讲义第3讲：牛顿法和for循环
方程数值求解 下面几讲,我们将聚集如下方程的解法: \begin{equation} f(x)=0 \tag{3.1}\label{3.1} \end{equation} 在微积分课程中,我们知道,许 ...