使用CSS和/或jQuery來動態顯示絕對定位內容的動畫

Question

我有一個容器，我想展開它來展示一旦容器完全展開後，絕對定位到右下角的內容。

使用CSS擴展容器非常簡單。

@keyframes test-grow { 
    100% { 
    width: 100%; 
    height: 30rem; 
    } 
} 

.test { 
    width: 2rem; 
    height: 2rem; 
    animation: test-grow 5s forwards; 
} 

棘手的部分是揭示其中的內容。使用簡單的絕對定位不起作用，因爲無論內容大小如何，內容都固定在容器的右下角，因此容器隨着容器角的增大而移動。

這裏是想什麼，我實現了快速GIF例如：http://imgur.com/pRneSJr但我透露將是順利的每個角落。

我在這裏筆：http://codepen.io/abbasinho/pen/QyrZOm?editors=1100顯示容器動畫。但是你會看到我的內容問題。

任何幫助將感激地收到。

Answer 1

繁榮。有亞去

.test { 
    position: relative; 
    width: 2rem; 
    height: 2rem; 
    background: rgba(white, 0.5); 
    animation: test-grow 5s forwards; 
    overflow:hidden; 
} 

h1 { 
    font-family: Helvetica Neue, Helvetica, Arial; 
    font-weight: bold; 
    font-size: 200px; 
    position: absolute; 
    top: 18rem; 
    left: 28rem; 
}