CSS 动画详解 animation transmation

腾讯动画在线制作库 http://isux.tencent.com/css3/index.html?transition-property
css3 keyframe

#animation{
-webkit-animation:rotateInDownLeft 1s .2s ease both;
-moz-animation:rotateInDownLeft 1s .2s ease both;}
@-webkit-keyframes rotateInDownLeft{
0%{-webkit-transform-origin:left bottom;
-webkit-transform:rotate(-90deg);
opacity:0}
100%{-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0);
opacity:1}
}
@-moz-keyframes rotateInDownLeft{
0%{-moz-transform-origin:left bottom;
-moz-transform:rotate(-90deg);
opacity:0}
100%{-moz-transform-origin:left bottom;
-moz-transform:rotate(0);
opacity:1}
}

jq动画 ：animate

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

//添加动画时间
$("div").animate({height:"toggle"},200） // 200的单位是毫秒 

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（比如 “margin:30px”）。字符串值无法创建动画（比如 “background-color:red”）。
注释：使用 “+=” 或 “-=” 来创建相对动画（relative animations）。

transform:

transition-property: background-color;  
transition-duration: 1s;  
transition-timing-function: linear;

transform 与 animotion区别参考
http://www.tuicool.com/articles/NRVvqm

animation功能与transition都能通过改变css的属性值来实现动画效果，他们的不同之处是：transition只能指定属性的开始值和结束值来达到渐变，不能像animation那样定义关键帧来实现比较复杂的动画效果。