簡單講一講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類（放大縮?。?/p>

  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;}}