使用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？edit = 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;
}