Css 设置生长div的动画，然后设置子元素的动画

我目前正在尝试

为一个不断增长的
制作动画，但我不想让内容看起来像是在增长。当
处于动画状态时，内容应该保持不可见，一旦内容完全长大，我希望内容变得可见（通过更改
中
的不透明度）

这是
动画的代码：

@关键帧菜单{
0% {
背景色：白色；
右：-25px；
顶部：-25px；
边界半径：100px；
宽度：0px；
高度：0px；
}
25%{
右：-50px；
顶部：-50px；
边界半径：100px；
宽度：60px；
高度：60px；
}
50% {
右：-50px；
顶部：-50px；
宽度：80px；
高度：80px；
边界半径：100px；
}
75%{
右：-50px；
顶部：-50px；
宽度：150px；
高度：150像素；
边界半径：100px；
}
80%{
右：-50px；
顶部：-50px；
宽度：300px；
高度：300px；
边界半径：300px；
}
100%{
右图：-150px；
顶部：-150px；
宽度：450px；
高度：450px；
边界半径：600px；
}
}

它基本上是一个菜单，从角落开始，一直扩展到覆盖整个屏幕（移动）。我尝试添加
a{opacity:1}但我猜它不是那样工作的。
我会使用一个小jQuery来完成这项工作。使用回调，您可以在
div
完成后调用
a
上的
opacity 1

  $( ".yourdiv" ).animate({
    width: "450"
    height: "450"
  }, 5000, function() {
    //callback will cause the a to change its opacity only when the above function is complete
    $('.yourdiv a').css('opacity') = '1';
  });

如果希望锚文本（在
div
中）仅在父
div
上的动画完全完成后才可见，则向
a
添加另一个
动画
，在等于父
动画持续时间
的延迟后，将
不透明度
从0设置为1


div{
背景色：黑色；
线高：450px；
文本对齐：居中；
动画：菜单4s线性向前；
}
a{
颜色：白色；
文字装饰：无；
动画：向后显示1s线性4s；
}
@关键帧菜单{
0% {
背景色：白色；
右：-25px；
顶部：-25px；
边界半径：100px；
宽度：0px；
高度：0px；
}
25% {
右：-50px；
顶部：-50px；
边界半径：100px；
宽度：60px；
高度：60px；
}
50% {
右：-50px；
顶部：-50px；
宽度：80px；
高度：80px；
边界半径：100px；
}
75% {
右：-50px；
顶部：-50px；
宽度：150px；
高度：150像素；
边界半径：100px；
}
80% {
右：-50px；
顶部：-50px；
宽度：300px；
高度：300px；
边界半径：300px；
}
100% {
右图：-150px；
顶部：-150px；
宽度：450px；
高度：450px；
边界半径：600px；
}
}
@关键帧显示{
从{
不透明度：0；
}
到{
不透明度：1；
}
}

Soo如果我没有弄错，你想让一个div动画到一定的大小，然后显示内容吗？“我不想让你看到这个”。。。。然后我会改变代码/内容，让每个人都能看到，贡献你的其余代码，让我们帮助你。你是说？@Keyboardninja是的，exactly@Greg：是的，这是因为我的原始代码中的元素默认没有背景色。我已经更改了它并将其作为答案发布。检查是否有帮助：）想法基本相同。