我想您要的是這樣的效果

這個效果，主要是透過transition事件動畫，當然也可以用animation動畫

下面我們看看transition、animation怎麼區分？

transition需要觸發一個事件， 而animation在不需要觸發任何事件的情況下也可以顯式的隨著時間變化來改變元素css的屬性值，從而達到一種動畫的效果。transition屬性是一個簡單的動畫屬性，非常簡單非常容易用。可以說它是animation的簡化版本，是給普通做簡單網頁特效用的。

ok，明白了吧

我們用animation實現上面效果看看

animation語法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

屬性值描述

animation-name 規定 @keyframes 動畫的名稱。animation-duration 規定動畫完成一個週期所花費的秒或毫秒。預設是 0。animation-timing-function 規定動畫的速度曲線。預設是 "ease"。linear 動畫從頭到尾的速度是相同的。ease 預設。動畫以低速開始，然後加快，在結束前變慢。ease-in 動畫以低速開始。ease-out 動畫以低速結束。ease-in-out 動畫以低速開始和結束。cubic-bezier(n,n,n,n) 在 cubic-bezier 函式中自己的值。可能的值是從 0 到 1 的數值。animation-fill-mode 規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。forwards 在動畫結束後（由 animation-iteration-count 決定），動畫將應用該屬性值。backwards 動畫將應用在 animation-delay 定義期間啟動動畫的第一次迭代的關鍵幀中定義的屬性值。這些都是 from 關鍵幀中的值（當 animation-direction 為 "normal" 或 "alternate" 時）或 to 關鍵幀中的值（當 animation-direction 為 "reverse" 或 "alternate-reverse" 時）。both 動畫遵循 forwards 和 backwards 的規則。也就是說，動畫會在兩個方向上擴充套件動畫屬性。animation-delay 規定動畫何時開始(延時多少s後執行)。預設是 0。animation-iteration-count 規定動畫被播放的次數。預設是 1。animation-direction 規定動畫是否在下一週期逆向地播放。預設是 "normal"。reverse 動畫反向播放。alternate 動畫在奇數次（1、3、5...）正向播放，在偶數次（2、4、6...）反向播放。alternate-reverse 動畫在奇數次（1、3、5...）反向播放，在偶數次（2、4、6...）正向播放。animation-play-state 規定動畫是否正在執行或暫停(通常控制動畫是否執行或暫停)。預設是 "running"。paused 指定暫停動畫running 指定正在執行的動畫

注意

animation 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。

只說思路，其他請結合教程文件：

1、既然是動畫就必須有明確的起始值和結束值。

首先要得到這個dom的實際高度，作為自適應的值，如何得到？

div p ../p /div

第一層div高度預設固定或者為0都行，這時p標籤是能獲取到真實高度的，把p的高度傳給div就行了，要注意如果存在圖片、外聯資源時需要監聽這些資源是否載入完畢

高度這個需要計算dom的實際高度

2、動畫如何實現

jquery也行，css3也行

transition

　　transition-property：檢索或設定物件中的參與過渡的屬性

　　transition-duration：檢索或設定物件過渡的持續時間

　　transition-delay：檢索或設定物件延遲過渡的時間

　　transition-timing-function：檢索或設定物件中過渡的動畫型別

　　簡寫：

　　transition:all/具體屬性值 運動時間s/ms 延遲時間s/ms 動畫型別

　　transition-timing-function：檢索或設定物件中過渡的動畫型別

　　

　　貝塞爾曲線：

　　屬性值：cubic-bezier()貝塞爾曲線網址：http://cubic-bezier.com/逐幀動畫：transition-timing-function:steps(動畫執行的步數);

　　CSS3 2D

　　transform

　　transform的屬性包括：rotate() / skew() / scale() / translate(,) ，分別還有x、y之分，比如：rotatex() 和 rotatey()

　　1、translate()

　　將元素向指定的方向移動，類似於position中的relative。

　　水平移動：向右移動translate(tx,0)和向左移動translate(-tx,0);

　　垂直移動：向上移動translate(0,-ty)和向下移動translate(0,ty);

　　對角移動：右下角移動translate(tx,ty)、右上角移動translate(tx,-ty)、左上角移動translate(-tx,-ty)和左下角移動translate(-tx,ty)。

　　translateX()：水平方向移動一個物件。對像只向X軸進行移動，如果值為正值，對像向右移動;如果值為負值，對像向左移動。translateY()：縱軸方向移動一個物件。物件只向Y軸進行移動，如果值為正值，物件向下移動;如果值為負值，對像向上移動。

　　這兩個函式和前面介紹的translate()函式不同的是每個方法只接受一個值。

　　所以

　　transform:translate(-100px,0)實際上等於transform:translateX(-100px);

　　transform:translate(0,-100px)實際上等於transform:translateY(-100px)。

　　2、scale()

　　讓元素根據中心原點對物件進行縮放。預設的值1。因此0.01到0.99之間的任何值，使一個元素縮小;而任何大於或等於1.01的值，讓元素顯得更大。

　　縮放scale()函式和translate()函式的語法非常相似，他可以接受一個值，也可以同時接受兩個值，如果只有一個值時，其第二個值預設與第一個值相等。

　　例如，

　　scale(1,1)元素不會有任何變化，而scale(2,2)讓元素沿X軸和Y軸放大兩倍。

　　scaleX()：相當於scale(sx,1)。表示元素只在X軸(水平方向)縮放元素，其預設值是1。

　　scaleY()：相當於scale(1,sy)。表示元素只在Y軸(縱橫方向)縮放元素，其預設值是1。

　　3、rotate()

　　旋轉rotate()函式透過指定的角度引數對元素根據物件原點指定一個2D旋轉。它主要在二維空間內進行操作，接受一個角度值，用來指定旋轉的幅度。如果這個值為正值，元素相對原點中心順時針旋轉;如果這個值為負值，元素相對原點中心逆時針旋轉。

　　rotateX() 方法，元素圍繞其 X 軸以給定的度數進行旋轉

　　rotateY() 方法，元素圍繞其 Y 軸以給定的度數進行旋轉

　　4、skew()

　　傾斜skew()函式能夠讓元素傾斜顯示。它可以將一個物件以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。

　　一個引數時：表示水平方向的傾斜角度;

　　兩個引數時：第一個引數表示水平方向的傾斜角度，第二個引數表示垂直方向的傾斜角度

　　

　　transform-origin

　　transform-origin是變形原點，也就是該元素圍繞著那個點變形或旋轉，該屬性只有在設定了transform屬性的時候起作用;

　　因為我們元素預設基點就是其中心位置，換句話說我們沒有使用transform-origin改變元素基點位置的情況下，transform進行的rotate,translate,scale,skew等操作都是以元素自己中心位置進行變化的。

　　2D 轉換元素能夠改變元素 x 和 y 軸