（1）@keyframes 定义关键帧动画
（2）animation-name 动画名称
（3）animation-duration 动画时间
（4）animation-timing-function 动画曲线linear（匀速）| ease（缓冲）| step（步数）
（5）animation-delay 动画延迟
（6）animation-iteration-count 动画播放次数n | infinite
（7）animation-direction 动画结束后是否反向还原 normal | alternate
（8）animation-play-state 动画状态 paused（停止）| running（运动）
（9）animation-fill-mode 动画前后的状态 none（缺省）| forward(结束时停留在最后一帧) | backwards（开始时停留在定义的开始帧）| both（前后都应用）
（10）animation：name duration timing-function delay iteration-count direction；同时设置多个属性
例子一：
<head>
<meta charset="utf-8">
<title>animation动画</title>
<style type="text/css">@keyframes shrink{
from{
???????width: 200px; ???} ???to{ ???????width: 600px; ???}}.box{ ???width: 200px; ???height: 30px; ???background-color: yellow; ???animation: shrink 1s ease 0.2s infinite normal;}.box:hover{ ???animation-play-state: paused;}</style></head>
<body>
<div class="box"></div></body>
例子二：loading
<head>
<meta charset="utf-8">
<title>loading</title>
<style type="text/css">
@keyframes loading{ ???from{ ???????transform: scale(1,1); ???} ???to{ ???????transform: scale(1,0.5); ???}}.box{ ???width: 300px; ???height: 200px; ???border: 1px solid #000;}.box div{ ???width: 30px; ???height: 100px; ???background-color: gold; ???margin: 15px; ???float: left; ???border-radius: 15px; ???animation: loading 500ms ease infinite alternate;}.box div:nth-child(1){ ???????????????????/*CSS3新增选择器*/ ???background-color: #3DE94C;}.box div:nth-child(2){ ???background-color: #3DB0AB; ???animation-delay: 100ms;}.box div:nth-child(3){ ???background-color: #969EF3; ???animation-delay: 200ms;}.box div:nth-child(4){ ???background-color: #F488ED; ???animation-delay: 300ms;}.box div:nth-child(5){ ???background-color: #ED4F52; ???animation-delay: 400ms;}</style></head>
<body>
<div class="box"> ???<div ></div> ???<div ></div> ???<div ></div> ???<div ></div> ???<div ></div> ???<p>loading.........</p></div></body>
2.CSS3新增选择器
E:nth-child(n)：匹配元素类型为E，且是父元素的第n个。
3.CSS3圆角、rgba
(1)圆角
设置某一个角的圆角，比如设置左上角的圆角：
border-top-left-radius:30px 60px;
同时设置四个角：
border-radius：20px 10px 30px 50px;
设置四个圆角相同：
border-radius：50%;
4.rgba(新的颜色值表示法)
（1）盒子透明表示法：
.box{
width: 300px;
height: 300px;
background-color: #000000;
margin: 50px auto;
???/*透明完整写法,整个盒子透明*/ ???opacity: 0.3; ???filter: alpha(opacity=30);}.box01{ ???width: 300px; ???height: 300px; ???/*第二种写法，仅背景透明*/ ???background-color: rgba(0,0,0,0.5); ???margin: 50px auto; ???/*透明完整写法*/ ???/*opacity: 0.3; ???filter: alpha(opacity=30);*/}CSS3 animation动画
原文地址：http://blog.51cto.com/13742773/2336768