CSS 实现动画效果，原来这么简单

以前做动画效果很麻烦，但现在使用CSS3很容易做出动画效果。

CSS3 （transition）转换允许我们在给定的持续时间内从一个属性值更改为另一个，这不就是一个动画么。有以下几个参数可供选择：transition-property - 指定要转换的属性transition-duration - 指定转换应该发生的持续时间transition-timing-function - 指定转换速度如何在其持续时间transition-delay上改变 - 指定延迟（以秒为单位）过渡效果在下面的例子中，我们设置过渡属性来变换，具有持续时间为5秒，慢启动的过渡效果。

再看下一个例子：

鼠标移动上以后的过渡效果如下：

其中，transition-timing-function过渡定时功能属性有些复杂，但我们一般默认就可，默认是easy效果，这个属性指定迁移效果的速度曲线。它可以具有以下值：ease - 动画启动缓慢，然后快速加速。ease-in开始缓慢，然后加速，突然停止。ease-out - 快速启动，但减速停止。ease-in-out - 类似于ease ，但更加微妙的加速和减速

linear - 恒定速度; 通常最适合颜色或不透明度的变化

最后，有cubic-bezier（），它允许你在cubic-bezier函数中定义你自己的值。可能的值是从0到1的数值。

但是一般用不到这么复杂，例如以下是DIV翻转的例子，

鼠标移动到某个DIV上，整个DIV会在2秒内完成旋转360度的效果。具体效果可以参考古典小说网首页