参考：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. scala一些高级类型

    package com.ming.test import scala.collection.mutable.ArrayBuffer import scala.io.Source import java ...

  2. PHP用substr截取字符串出现中文乱码问题用mb_substr

    PHP用substr截取字符串出现中文乱码问题用mb_substr实例:mb_substr('截取中文乱码问题测试',0,5, 'utf-8'); 语法 : string substr (string ...

  3. Linux Kernel之flush_cache_all在ARM平台下是如何实现的【转】

    转自:http://blog.csdn.net/u011461299/article/details/10199989 版权声明:本文为博主原创文章,未经博主允许不得转载. 在驱动程序的设计中,我们可 ...

  4. 转：Spring AOP术语

    1.连接点(Joinpoint)       程序执行的某个特定位置:如类开始初始化前.类初始化后.类某个方法调用前.调用后.方法抛出异常后.这些代码中的特定点,称为“连接点”.Spring仅支持方法 ...

  5. bash环境变量读取顺序

    bash环境变量读取顺序: 交互式登录的用户: /etc/profile --> /etc/profile.d/*.sh --> ~/.bash_profile --> ~/.bas ...

  6. run loop 输入源

    做了一年多的IOS开发,对IOS和Objective-C深层次的了解还十分有限,大多还停留在会用API的级别,这是件挺可悲的事情.想学好一门语言还是需要深层次的了解它,这样才能在使用的时候得心应手,出 ...

  7. MFC中的CDC,CClientDC,CPaintDC,CWindowDC的区别

    转自 http://blog.csdn.net/guoquan2003/article/details/4534716 CDC是Windows绘图设备的基类. CClientDC:(1)(客户区设备上 ...

  8. Redis 安装 启动 连接 配置 重启

    Linux下安装 ]# wget http://download.redis.io/releases/redis-2.8.17.tar.gz ]# .tar.gz ]# cd redis- ]# ma ...

  9. sass初步认识2

    sass可以使用变量,采用 $ 来进行变量声明,格式为: $highlight-color:#f90;(声明方式和css属性声明类似.使用的变量名可以更加语义化) 与js分为全局变量和局部变量类似,s ...

  10. 每日一九度之 题目1041：Simple Sorting

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:4883 解决:1860 题目描述: You are given an unsorted array of integer numbers. ...