颜色渐变的动画效果：

transition:color 0.4s;-moz-transition:color 0.4s;-webkit-transition:color 0.4s;-o-transition:color 0.4s;

0.4s为变化时间，可以更具情况修改，一般使用在a标签上。

下拉菜单常用的高度变化效果：

height:0;overflow: hidden;transition: height 0.4s;-moz-transition: height 0.4s;-webkit-transition: height 0.4s;-o-transition: height 0.4s;

先定义高度为0，最好加上overflow: hidden，隐藏四周的溢出，这样之前就什么不会显示，常用于二级下拉菜单，注意是这是定在没有点击时候的，点击后的伪类只需要一个跟之前不一样的高度定义就可以了。。

背景颜色的的渐变效果

transition:background-color 0.3s linear;-moz-transition:background-color 0.3s linear;-webkit-transition:background-color 0.3s linear;-o-transition:background-color 0.3s linear;

linear这个属性是点上去有过度效果。

旋转效果：

transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out；

这一段定义在鼠标经过前

-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);transform: rotate(180deg);-o-transform:rotate(180deg);

这一段定义在鼠标经过后

180deg为旋转180度，ease-in-out这个属性是有伪类触发上去是什么效果，结束之后还是这个效果。

图片缩放

transform: scale(1.2);-webkit-transition: scale(1.2);-moz-transition: scale(1.2)