简单讲一讲CSS3的动画属性，transition，transform和animation
一、transition 过渡
transition 是一个简写属性，可扩展为
1.transition-property属性，设置过渡效果的属性名称
值可为：none（没有属性有效果）|| all（所有属性有效果）|| property（自定义属性名称）
2.transition-duration属性，设置效果持续时间
3.transition-timing-function属性，设置效果的速度曲线
值可为：
linear，线性效果
ease-in，先慢后快
ease-out，先快后慢
ease-in-out，先慢后快再慢
cubic-bezier（n，n，n，n），某种速度函数
4.transition-delay属性，设置延迟执行效果的时间
二、transform 变换
常见取值分为四块，
translate类（偏移）
scale类（放大缩小）
rotate类（旋转）
skew类（拉伸）
与之相关有一个属性，transform-origin，允许你改变被转换元素的属性
transition 常与 transform 组合使用，例子
.image {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
cursor:pointer;
}
.image_top {
position: absolute;
-webkit-transform: scale(0, 0);
opacity: 0;
filter: Alpha(opacity=0);
}
.box:hover .image_bottom{
-webkit-transform: scale(0, 0);
-webkit-transform-origin: bottom left;
}
让div拥有名为box的class属性，里面图片拥有名为image和image_bottom的class属性，则鼠标移至该div，该图片会向左下角缩小，并且透明，最后消失，鼠标移走，图片有会反向复原（向右上角放大，逐渐显现）
注意：这里ie低版本不支持opacity所以用filter兼容（ie你懂得）
三、animation 动画
animation 也是一个简述属性，可拓展为
1.animation-name需要绑定到选择器keyframe的名字
2.animation-duration，动画时间
3.animation-timing-function，动画速度曲线，所填值与transition的该属性相同
4.animation-delay，动画延迟执行
5.animation-iteration-count，动画播放次数，值可为 n（次数）|| infinite（无限次）
6.animation-direction，是否反向播放，值为 normal（默认，正常播放）|| alternate（反向播放）
与之相关的有@keyframe属性，简单例子
.animation{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite;
}
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}