参考：http://www.w3school.com.cn/css3/css3_animation.asp

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

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
animation-fill-mode 规定对象动画时间之外的状态。 3

　　实例１：

<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:red;

animation:myfirst 5s;

-moz-animation:myfirst 5s; /* Firefox */

-webkit-animation:myfirst 5s; /* Safari and Chrome */

-o-animation:myfirst 5s; /* Opera */

}

@keyframes myfirst

{

0%   {background:red;}

25%  {background:yellow;}

50%  {background:blue;}

100% {background:green;}

}

@-moz-keyframes myfirst /* Firefox */

{

0%   {background:red;}

25%  {background:yellow;}

50%  {background:blue;}

100% {background:green;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

0%   {background:red;}

25%  {background:yellow;}

50%  {background:blue;}

100% {background:green;}

}

@-o-keyframes myfirst /* Opera */

{

0%   {background:red;}

25%  {background:yellow;}

50%  {background:blue;}

100% {background:green;}

}

</style>

</head>

<body>

<div></div>

</body>

</html>

效果

　　

　　实例２：

<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:myfirst 5s linear 2s infinite alternate;

/* Firefox: */

-moz-animation:myfirst 5s linear 2s infinite alternate;

/* Safari and Chrome: */

-webkit-animation:myfirst 5s linear 2s infinite alternate;

/* Opera: */

-o-animation:myfirst 5s linear 2s infinite alternate;

}

@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>

<div></div>

</body>

</html>

效果

CSS笔记（十四）CSS3之动画的更多相关文章

  1. python3.4学习笔记(十四) 网络爬虫实例代码，抓取新浪爱彩双色球开奖数据实例

    python3.4学习笔记(十四) 网络爬虫实例代码,抓取新浪爱彩双色球开奖数据实例 新浪爱彩双色球开奖数据URL:http://zst.aicai.com/ssq/openInfo/ 最终输出结果格 ...

  2. 《C++游戏开发》笔记十四 平滑过渡的战争迷雾(二) 实现：真正的迷雾来了

    本系列文章由七十一雾央编写,转载请注明出处.  http://blog.csdn.net/u011371356/article/details/9712321 作者:七十一雾央 新浪微博:http:/ ...

  3. (C/C++学习笔记) 十四. 动态分配

    十四. 动态分配 ● C语言实现动态数组 C语言实现动态数组,克服静态数组大小固定的缺陷 C语言中,数组长度必须在创建数组时指定,并且只能是一个常数,不能是变量.一旦定义了一个数组,系统将为它分配一个 ...

  4. CSS笔记（四）文本

    CSS 文本属性可定义文本的外观.通过文本属性,可以改变文本的颜色.字符间距,对齐文本,装饰文本和对文本进行缩进,等等. 参考:http://www.w3school.com.cn/css/css_t ...

  5. 【转】angular学习笔记(十四)-$watch(1)

    本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...

  6. angular学习笔记(十四)-$watch(1)

    本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...

  7. CSS（十四）：盒子模型

    页面布局的本质 网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子. 利用CSS设置好盒子样式,然后放到相应的位置 往盒子里面装内容 网页布局的本质:就是利用CSS摆盒子 盒子模型 组成 所 ...

  8. TCP/IP详解 笔记十四

    TCP/IP协议(二)  连接的建立与终止 tcpdump -S输出TCP报文的格式 格式: 源>目的:标志 (标志就是tcp头部).标识首字符意义如下: 例如:telnet 某服务的输出(包括 ...

  9. python 学习笔记十四 jQuery案例详解（进阶篇）

    1.选择器和筛选器 案例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  10. SharpGL学习笔记(十四) 材质：十二个材质球

    材质颜色 OpenGL用材料对光的红.绿.蓝三原色的反射率来近似定义材料的颜色.象光源一样,材料颜色也分成环境.漫反射和镜面反射成分,它们决定了材料对环境光.漫反射光和镜面反射光的反射程度.在进行光照 ...

随机推荐

  1. 【python cookbook】【数据结构与算法】7.让字典保持有序

    问题:创建一个字典,同时对字典做迭代或序列化操作时,也能控制其中元素的顺序: 解决方案:可以使用collections模块中的OrderedDict类来控制字典中元素的顺序.当对字典做迭代时,他会严格 ...

  2. iOS 学习笔记 三 （2015.03.05）

    服务和特征都是用UUID来唯一标识的,UUID的概念如果不清楚请自行google,国际蓝牙组织为一些很典型的设备(比如测量心跳和血压的设备)规定了标准的service UUID(特征的UUID比较多, ...

  3. IOS 网络请求中设置cookie

    版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+]   1. ASIHTTPRequest ASIHTTPRequest 是一款极其强劲的 HTTP 访问开源项目.让简单的 A ...

  4. C#:通过Window API接口实现WiFi

    1.获取Mac地址 //WiFi通知回调 private WlanApi.WLAN_NOTIFICATION_CALLBACK _notificationCallback; this._notific ...

  5. ACM第四站————最小生成树（克鲁斯卡尔算法）

    都是生成最小生成树,库鲁斯卡尔算法与普里姆算法的不同之处在于——库鲁斯卡尔算法的思想是以边为主,找权值最小的边生成最小生成树. 主要在于构建边集数组,然后不断寻找最小的边. 同样的题目:最小生成树 题 ...

  6. 凯撒加密解密（java字母移位）

    1.设计思想:加密就是将字符数据转化为ASC码表中的数字,a—w之间通过加3之后再转化为字符型输出,x—z之间通过转化为ASC码表中的数字后减去23再转化为字符型输出.解密就是将字符数据转化为ASC码 ...

  7. 【转】Firefox快捷键

    转载地址: http://www.douban.com/note/140139119/ Ctrl + 数字键来打开第N个标签页这种还要先数完再到键盘上找数字Ctrl + Page Up = 激活左边一 ...

  8. Present

    Present time limit per test 2 seconds memory limit per test 256 megabytes input standard input outpu ...

  9. Sightseeing tour

    Sightseeing tour Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 8276 Accepted: 3489 Desc ...

  10. SecureCRT issue "Could not open clipboard: Assess is denied" (无法打开粘贴板:访问被拒绝)

    I got an issue when copying some line/word (actually just select the context ) in the Linux terminal ...