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动画的更多相关文章

  1. 2016年11月10日 星期四 --出埃及记 Exodus 20:1

    2016年11月10日 星期四 --出埃及记 Exodus 20:1 And God spoke all these words: 神吩咐这一切的话说,

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

  3. 2016年12月10日 星期六 --出埃及记 Exodus 21:5

    2016年12月10日 星期六 --出埃及记 Exodus 21:5 "But if the servant declares, `I love my master and my wife ...

  4. 2016年11月30日 星期三 --出埃及记 Exodus 20:21

    2016年11月30日 星期三 --出埃及记 Exodus 20:21 The people remained at a distance, while Moses approached the th ...

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

  6. 2016年11月28日 星期一 --出埃及记 Exodus 20:19

    2016年11月28日 星期一 --出埃及记 Exodus 20:19 and said to Moses, "Speak to us yourself and we will listen ...

  7. 2016年11月27日 星期日 --出埃及记 Exodus 20:18

    2016年11月27日 星期日 --出埃及记 Exodus 20:18 When the people saw the thunder and lightning and heard the trum ...

  8. 2016年11月26日 星期六 --出埃及记 Exodus 20:17

    2016年11月26日 星期六 --出埃及记 Exodus 20:17 "You shall not covet your neighbor's house. You shall not c ...

  9. 2016年11月25日 星期五 --出埃及记 Exodus 20:16

    2016年11月25日 星期五 --出埃及记 Exodus 20:16 "You shall not give false testimony against your neighbor.不 ...

随机推荐

  1. 自然语言20_The corpora with NLTK

    QQ:231469242 欢迎喜欢nltk朋友交流 https://www.pythonprogramming.net/nltk-corpus-corpora-tutorial/?completed= ...

  2. Java数据结构——有序链表

    //================================================= // File Name : SortedList_demo //--------------- ...

  3. Python之路【第七篇】：初识Socket

    What is Socket 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket. Socket的英文原义是“孔”或“插座”.作为BSD UNIX的进程通信机制, ...

  4. Java多线程编程核心技术---Java多线程技能

    基本概念 进程是操作系统结构的基础,是一次程序的执行,是一个程序及其数据结构在处理机上顺序执行时所发生的活动,是程序在一个数据集合上运行的过程,是系统进行资源分配和调度的独立单位.线程可以理解成是在进 ...

  5. QT入门

    QT += core gui widgets //引入需要用到的库 qDebug()<<"t="<<t<<QTime::currentTime( ...

  6. 使用微信JS-SDK调用微信浏览器的接口

    先附上微信公众平台的相关链接: 微信公众平台:https://mp.weixin.qq.com/ 微信公众平台开发文档:https://mp.weixin.qq.com/wiki 微信公众平台JS-S ...

  7. oracle 的wm_concat函数使用

    转载自:http://blog.itpub.net/post/42245/522757 首先让我们来看看这个神奇的函数wm_concat(列名),该函数可以把列值以","号分隔起来 ...

  8. SVN使用教程总结[转]

    SVN使用教程总结   SVN简介: 为什么要使用SVN? 程序员在编写程序的过程中,每个程序员都会生成很多不同的版本,这就需要程序员有效的管理代码,在需要的时候可以迅速,准确取出相应的版本. Sub ...

  9. Python 爬虫笔记、多线程、xml解析、基础笔记（不定时更新）

    1  Python学习网址:http://www.runoob.com/python/python-multithreading.html

  10. CString

    CString gray("Gray"); CString cat("Cat"); CString graycat = gray + cat;   与其用 sp ...