参考：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. Discuz! X2头部header.htm修改指南

    相对于1.5版本,2.0版本并没有在模板机制上做太大改动,基本延续了1.5的模板机制.下面我就为和大家一起过一下X2的头部代码.希望大家对头部代码有些认识. 1.顶部的设为首页,和收藏本站.这里是可以 ...

  2. php的内存分配还是很智能的

    <?php echo memory_get_usage().PHP_EOL;$a = 1;$b = $a;echo memory_get_usage().PHP_EOL; <?php ec ...

  3. hdwiki中插件开发指南

    插件就是为了满足个性化需求按照HDWiki插件开发规范编写的可插拔程序,虽然可以直接对HDWiki进行二次开发实现插件同样的功能,但是这样做势必影响到系统的升级和稳定性. 采用插件的方式,可以随时进行 ...

  4. [Ogre][地形][原创]基于OgreTerrain的地形实现

    需要用到的外部图片资源: 在ogre调用时需要多用到的几个外部dll: OgreTerrain_d.dll 需要添加头文件 #include "Ogre\Ogre.h"#inclu ...

  5. js命名空间笔记

    在量比较大或者多人编写的情况下,命名冲突就很有可能发生,同一个页面引用了两个命名相同功能不同的文件,调用的时候就会出问题.因此使用JS命名空间很重要. 1.采用字面量方法创建命名空间: var a={ ...

  6. Session案例：简易的购物车

    三个jsp和两个Servlet组成:在WebContent下边建立一个shoppingcart文件夹,将三个jsp文件放在里面: 1.建立一个step1.jsp文件,出现一个表格,是一个复选框,可以选 ...

  7. 山东理工大学第七届ACM校赛-经济节约 分类： 比赛 2015-06-26 10:34 19人阅读 评论(0) 收藏

    经济节约 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 由于经济紧张,某国国王决定减少一部分多余的士兵,这些士兵在边界都有各自的 ...

  8. php使用 set_include_path

    通过set_include_path引用home/lib/image.func.php 1.创建include.php 2.添加如下代码 3.在需要引用的文件中包含include.php文件 < ...

  9. CSS之盒子模型

    CSS核心内容 源文件目录: D:\Users\ylf\Workspaces\MyEclipse 10 标准流 盒子模型 浮动 定位 标准流/非标准流: 标准流:就是普通的 非标准流:实际工作中要打破 ...

  10. 2016年11月1日 星期二 --出埃及记 Exodus 19:17

    2016年11月1日 星期二 --出埃及记 Exodus 19:17 Then Moses led the people out of the camp to meet with God, and t ...