一、transition(过渡）：
1.规定使用属性的名称；
2.规定时长；
3.配合hover的使用。
div{
width:100px;
height:50px;
background:red;
transition:width 5s linear 2s;
}
div:hover{
width:1200px;
height:200px;
}
二、动画（animation):
@keyframe规则用于创建动画。(必须要在代码前面加入浏览器前缀，实现兼容性）
1.绑定选择器；
2.动画名称；
3.动画时长。
div{
width:100px;
height:50px;
background:red;
border:1px soild black;
position:relative;
animation:myfirst 5s linear 2s infinite;
}
@keyframe myfirst{
0% {backgroud:black; left:0px; top:0px;}
25%{background:yellow;left:200px;top:0px;}
50%{background:green;left:200px;top:200px;}
75%{background:bule;left:0px;top:200px;}
100%{background:red;left:0px;top:0px;}
}
原文：http://www.cnblogs.com/xingxing88/p/5861320.html