通过 css3，我们能够创建动画，这可以在许多网页中取代动画图片、flash 动画以及 javascript。
css3带来了圆角，半透明，阴影，渐变，多背景图等新的特征，轻松实现了设计稿中常见的图层样式，用简洁的代码替代图片，代替了多余的空标签。
<a target="_blank">1</a>
background-position 属性设置背景图像的起始位置，默认值：0% 0%，效果等同于left top
background-size 属性规定背景图片的尺寸。在 css3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在css3中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
box-shadow 属性向框添加一个或多个阴影
css3 color属性在传统的hex和rgb值中增加了hsl特性，也就是增加了opacity（透明度）和alpha channels
<dl></dl>
<dt></dt>
2d变形&过渡
<dd></dd>
旋转：设定旋转角度，对应css：transform:rotate(ndeg) (工具里n为-360 – 360间的任意数值)
x轴缩放：设定x轴方向缩放，对应css: transform:scalex(n)(工具里n为-5 – 5间的任意数值)
y轴缩放：设定y轴方向缩放，对应css: transform:scaley(n)(工具里n为-5 – 5间的任意数值)
x轴位移：设定x轴位移，对应css：transform:translatex(npx)
y轴位移：设定y轴位移，对应css：transform:translatey(npx)
x轴倾斜：设定x轴倾斜，对应css：transform:skewx(ndeg)
y轴倾斜：设定y轴倾斜，对应css：transform:skewy(ndeg)
矩阵变形：设定矩阵变形，对应css：transform:matrix(a,c,e,b,d,f) c,e值用正弦或余弦值表示,ab为缩放值，df为位移值
变形原点 ：设定变形原点，对应css：transform-origin:x y；transform-origin(x,y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中x和y的值可以是百分 值,em,px，其中x也可以是字符参数值left,center,right；y和x一样除了百分值外还可以设置字符值 top,center,bottom，这个看上去有点像我们background-position设置一样；下面我列出他们相对应的写法：
top left | left top 等价于 0 0 | 0% 0%
top | top center | center top 等价于 50% 0
right top | top right 等价于 100% 0
left | left center | center left 等价于 0 50% | 0% 50%
center | center center 等价于 50% 50%（默认值）
right | right center | center right 等价于 100% 50%
bottom left | left bottom 等价于 0 100% | 0% 100%
bottom | bottom center | center bottom 等价于 50% 100%
bottom right | right bottom 等价于 100% 100%
其中 left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%而top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;如果只取一个值，表示垂直方向值不变
过渡属性：执行变换的css属性，语法：transition-property
延迟时间：指定元素 转换过程的持续时间，语法：transition-duration
过渡效果：允许你根据时间的推进去改变属性值的变换速率，语法：transition-timing-function。点击对应按钮添加过渡效果，点击cubic-bezier()自定义立方贝塞尔曲线效果。
3d变形&过渡
透视：perspective有两种写法，一种是设置所有的子元素有一个共同的透视值，perspective作为一个属性值来写；一种是直接作用于元素本身，perspective作为transform的一个函数来写如：
.wrap{-webkit-perspective:1000px;}
.wrap .child{-webkit-transform:perspective(1000px);}
x轴旋转: rotatex(angele),相当于rotate3d(1,0,0,angle)指定在3维空间内的x轴旋转，语法：transform:perspective(length) rotatex(angele);
y轴旋转: rotatey(angele),相当于rotate3d(0,1,0,angle)指定在3维空间内的y轴旋转，语法：transform:perspective(length) rotatey(angele);
z轴旋转: rotatez(angele),相当于rotate3d(0,0,1,angle)指定在3维空间内的z轴旋转，语法：transform:perspective(length) rotatez(angele);
x轴缩放：scalex():表示只在x轴(水平方向)缩放元素。
y轴缩放：scaley():表示只在y轴(垂直方向)缩放元素。
z轴缩放：scalez():表示只在z轴缩放元素。前提是元素本身或者元素的父元素设定了透视值
x轴位移: : 表示只在x轴(水平方向)移动元素。语法：translatex();
y轴位移: 表示只在y轴(水平方向)移动元素。语法：translatey();
z轴位移: 表示只在z轴(水平方向)移动元素。语法：translatez();
y轴倾斜: ：设定y轴倾斜，对应css：transform:skewy(ndeg)
变形原点: 同2d
过渡属性: 同2d
过渡时间: 同2d
延迟时间: 同2d
过渡效果: 同2d
动画名称：自定义动画的名称, 对应css：animation-name:
执行时间：指定对象动画的持续时间，对应css: animation-duration:
延迟执行设置动画延迟执行的时间，对应css: animation-delay:
执行次数：设置对象动画的循环次数，对应css: animation-iteration-count:或infinite（无限循环）
变形原点：同变形&过渡
过渡效果：允许你根据时间的推进去改变属性值的变换速率，语法：animation-timing-function。点击对应按钮添加过渡效果，点击cubic-bezier()自定义立方贝塞尔曲线效果。
播放方向：：设置对象动画循环播放次数大于1次时，动画是否反向运动。语法：animation-direction:，normal：正常方向，reverse：动画反向运行（ff14.0.1以下不支持），alternate：动画会循环正反方向交替运动，alternate-reverse：动画从反向开始，再正反方向交替运动，运动方向始终与alternate定义的相反。（ff14.0.1以下不支持）
隐藏背景：设置对象动画时间之外的状态。语法：animation-fill-mode:, none：默认值。不设置对象动画之外的状态；forwards：结束后保持动画结束时的状态，但当animation-direction为0，则动画不执行，持续保持动画开始时的状态；backwards：结束后返回动画开始时的状态；both：结束后可遵循forwards和backwards两个规则。
动画状态设置对象动画的状态，语法：animation-play-state:, running：默认值。运动；paused：暂停。
执行动画的属性: 设置动画过程中对象属性
点击对应效果右侧查看实例，点击查看代码可直接查看对应效果的源码。
1、纯css3实现质感发光动画按钮
2、10大经典css3菜单应用欣赏
3、9种css3炫酷图片预览展示动画特效