受 pbtweet 里面那个漂亮的贴图徽章启发，我搜索了一些相关资料，将如何用 CSS 实现鼠标悬停动画效果的方法整理成本文。目前，能正确显示这些非正式 CSS 属性的浏览器还非常有限，不过可以确信的是，不能显示动画的浏览器不会受到不良影响，那么就让优秀的浏览器物尽其用吧。查看示例请用 Chrome, Safari 访问 本文，其它浏览器可能不能正常显示。
上图是一个鼠标悬停动画的例子，如果将以下代码应用到全局 CSS 中，则所有带链接的图片都会有如上图动画：
a img {
opacity: 0.8;
-webkit-transition: all 0.2s ease-out;
}
a:hover img {
opacity: 1;
-moz-transform: scale(1.05) rotate(2deg);
-webkit-transform: scale(1.05) rotate(2deg);
}
如果要求仅应用于 class="logo" 的图片，则将选择器改为：
a img.logo {...}
a:hover img.logo {...}
如果要求应用于 id="footer" 的 div 下所有图片，则将选择器改为：
#footer a img {...}
#footer a:hover img {...}
到这里，所有的工作都完成了，挺简单吧？下面进入详细分析说明。
transform: 形变目标值设定
兼容浏览器: Firefox 3.5, Chrome 2.0, Safari 3.1
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
上面的例子仅仅应用了 transform: rotate, 在鼠标悬停的时候逆时针旋转。除了 rotate, 还有 scale, translate, skew, matrix 等用法，想要深入把玩可参考 Animation Using CSS Transforms.
transform-origin: 形变中心点设定
兼容浏览器: Firefox 3.5, Chrome 2.0, Safari 3.1
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
默认值在对象的正中，X Y 值均为 50%. 更改数值可移动形变中心。下面两个例子，左边是 100% 100%(右下角), 右边是 0%, 100%(左下角):
transition: 过程动画设定
兼容浏览器: Chrome 2.0, Safari 3.1
-webkit-transition: all 0.2s ease-out;
-webkit-transition 是一个神奇的属性，它定义了动画过程的类型、时间、时间轴曲线。all 表示对所有变化应用动画，包括 transform, opacity; 后面两项是时间和时间轴曲线，可以有如下赋值：
以上 demo 来自 Transition Timing Functions, 展示了 transition 时间控制的强大，而且上面的 transform 是可以多重叠加的，配合 transition, 能做些什么大家想象一下吧！
opacity: 不透明度
兼容浏览器: 除了 IE
这是一个较为广泛支持的属性，前面早已没有了私有前缀(-moz, -webkit). 使用也很简单，让正常状态的图片稍微透明显示，鼠标悬停的时候恢复不透明，更加醒目。它同样可以在时间轴上受 transition 控制，试试看这个示例。
text-shadow: 文字阴影
兼容浏览器: Firefox 3.5, Chrome 2.0, Opera 9.5, Safari 3.1
text-shadow: 0px 1px 3px black;
以上赋值分别代表 X轴偏移，Y轴偏移，阴影扩散尺寸，颜色。应用到按钮、标题等处有很好的浮雕效果，同样的风格在 Mac OS X, iPhone 系统界面中有大量应用。