css - 动画增长 div 然后动画子元素

Question

我目前正在尝试 animate不断增长的<div>但我不希望内容看起来像是随着它一起增长。内容应保持不可见，同时 <div>是动画，一旦它完全长大，我希望内容变得可见(通过更改 <a> 中的 <div> 的不透明度)。

这是 <div> 的代码动画:

@keyframes menu {
  0% {
    background-color: white;
    right: -25px;
    top: -25px;
    border-radius: 100px;
    width: 0px;
    height: 0px;
  }
  25%{
    right: -50px;
    top: -50px;
    border-radius: 100px;
    width: 60px;
    height: 60px;
  }
  50% {
    right: -50px;
    top: -50px;
    width: 80px;
    height: 80px;
    border-radius: 100px;
  }
  75%{
    right:-50px;
    top:-50px;
    width: 150px;
    height: 150px;
    border-radius: 100px;
  }
  80%{
    right:-50px;
    top:-50px;
    width: 300px;
    height: 300px;
    border-radius: 300px;
  }
  100%{
    right:-150px;
    top:-150px;
    width: 450px;
    height: 450px;
    border-radius: 600px;
  }
}

它基本上是一个菜单，从 Angular 落开始，逐渐变大，直到覆盖整个屏幕(移动设备)。我试过添加 a{ opacity: 1 };但我想它不会那样工作。

Answer 1

如果您希望 anchor 文本(在 div 中)仅在父级 div 上的动画完全完成后才可见，则添加另一个 animation 到 a，在延迟等于父级的 animation-duration 后，将 opacity 从 0 设置为 1。

div {
  background-color: black;
  line-height: 450px;
  text-align: center;
  animation: menu 4s linear forwards;
}
a {
  color: white;
  text-decoration: none;
  animation: display 1s linear 4s backwards;
}
@keyframes menu {
  0% {
    background-color: white;
    right: -25px;
    top: -25px;
    border-radius: 100px;
    width: 0px;
    height: 0px;
  }
  25% {
    right: -50px;
    top: -50px;
    border-radius: 100px;
    width: 60px;
    height: 60px;
  }
  50% {
    right: -50px;
    top: -50px;
    width: 80px;
    height: 80px;
    border-radius: 100px;
  }
  75% {
    right: -50px;
    top: -50px;
    width: 150px;
    height: 150px;
    border-radius: 100px;
  }
  80% {
    right: -50px;
    top: -50px;
    width: 300px;
    height: 300px;
    border-radius: 300px;
  }
  100% {
    right: -150px;
    top: -150px;
    width: 450px;
    height: 450px;
    border-radius: 600px;
  }
}
@keyframes display {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<div>
  <a href='#'>Some Menu Link</a>
</div>