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.不 ...

随机推荐

input 获取当前id，name
<input name=" src="toright.png" value="mp3"> <script language=&quo ...
yourphp读取不到hits
源代码 <YP:list name="Article" order="id desc" catid="37" limit=" ...
sky
UniSky入门资料 http://game.ceeger.com/forum/read.php?tid=4069
flask安装及第一个程序
1.flask是一个轻量级的python web框架 ·1.Flask 依赖两个外部库: Jinja2 模板引擎和 Werkzeug WSGI 套件 ·2.安装: # easy_install fla ...
ASP.NET MVC使用Bootstrap系列（1）——开始使用Bootstrap
阅读目录 Bootstrap结构介绍在ASP.NET MVC 项目中添加Bootstrap文件为网站创建Layout布局页使用捆绑打包和压缩来提升网站性能在Bootstrap项目中使用捆绑打包 ...
C++ compile issue
You can do so via right-click -> Properties on a file or a selection of files in Solution Explore ...
是时候放弃Uploadify了
1.Uploadify是什么? Uploadify是来自国外的一款优秀jQuery插件,主要功能是批量上传文件. 这话是复制百度百科的,是:基于jQuery开发的文件上传插件. 2.为什么大家都在用? ...
整理的mysql优化内容
1,当只要一行数据时使用 LIMIT 1如果明确只取一条数据,要加上limit 1; 2,避免 SELECT *,根据需要获取字段应该养成一个需要什么就取什么的好的习惯. 3,使用 ENUM 而不是 ...
getStyle()，修改样式属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
[译]git init
git init git init命令用来创建一个新的Git仓储.可以用在一个已经存在的但是没有受Git版本控制的项目,或者用来初始化一个全新的没有任何文件的空仓储.git init通常是你开始一个新 ...

2016年11月10日--CSS动画

CSS3的动画属性

2016年11月10日--CSS动画的更多相关文章

随机推荐

热门专题