什么是CSS3？
CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。
在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。
CSS3能做什么？
CSS3给我们带来了什么好处呢？简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。
CSS3简化了前端开发工作人员的设计过程，加快页面载入速度。
CSS3都有哪些强大功能呢？各位小伙伴们先来一睹为快吧！
过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。
补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态
帧动画：扑克牌切换.通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
关于补间动画更多学习可查看http://mux.alimama.com/posts/1009
特点：当前元素只要有“属性”发生变化时，可以平滑的进行过渡。
transition-property设置过渡属性
transition-duration设置过渡时间
用来控制速度linear(匀速)
ease-in (加速)
ease-out 减速
ease-in-out 选加速再减速
transition-timing-function设置过渡速度
transition-delay设置过渡延时 超过时间后执行动画.
转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合即将学习的过渡和动画知识，
可以取代大量之前只能靠Flash才可以实现的效果。在css3 当中，通过transform(变形) 来实现2d 或者3d 转换,其中2d 有，缩放，移动，旋转。
1:缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，不可为负值；
2:移动 translate(x, y) 可以改变元素的位置，x、y可为负值；
x 在水平方向移动。
y 在垂直方向移动
3:旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针； transform-origin: right bottom;
4:倾斜
变形处理
你可以对HTML元素进行旋转、缩放、倾斜、移动、甚至以前只能用JavaScript实现的强大动画。
动画
1：transition
2：animation
<style>
div{
width: 300px;
background-color: #f00;
height: 100px;
/*这是简便的写法*/
/*transition: background-color 3s linear;*/
/*transition-property: background-color;
transition-duration: 3s ;
transition-timing-function: linear;*/
/*多种动画在一起的写法*/
/*transition: background-color 3s linear,height 3s linear;*/
transition: transparent 3s linear width 3s linear;
}
/*当鼠标移上去的时间背景颜色变化
hover 鼠标移上去
link 正常的状态
active 点击的状态
visited 点击过后的状态
* */
div:hover{
/*background-color: #f0f;*/
width: 500px;
transform: rotate(360deg);
}
</style>
animation
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
background-color: #f00;
}
@-webkit-keyframes mycolor{
0%{
background-color: #f00;
}
40%{
background-color: #f0f;
}
100%{
background-color: #ff0;
}
}
div:hover{
-webkit-animation: mycolor 5s linear;
}
</style>
</head>
<body>
<div>aaaa</div>
</body>
</html>
@-webkit-keyframes mycolor{
0%{background-color: #f00;
}
40%{
background-color: #f0f;
}
100%{
background-color: #ff0;
}
}
@media only and (max-width: 640px) {
#two{
float: left;
}