使用 CSS 和/或 jQuery 为 div 设置动画以显示绝对定位的内容

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