简述css3动画

    简单讲一讲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;}}