隐藏第二个元素，直到第一个元素完成动画 - CSS 关键帧答案

【问题标题】：Hide Second Element Until First Element is Finished Animating - CSS Keyframes隐藏第二个元素，直到第一个元素完成动画 - CSS 关键帧
【发布时间】：2020-06-05 02:40:45
【问题描述】：

我试图让第二个元素在第一个元素完成动画之前完全不显示在屏幕上。到目前为止，我已经尝试过：

@keyframes slideInFromRight {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0);
    }
}

.announcements-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    width: 300px;
}

.announcements-1 {
    animation: 0.4s ease-out 0s 1 slideInFromRight;
  }
  
.announcements-2 {
    margin-top: 15px;
    /* opacity: 0; */
    /* display: none; */
    /* animation-fill-mode: both; */
    animation: 0.4s ease-out 0s 1 slideInFromRight;
    animation-delay: 0.4s;
}

.annoucements-header {
    background-color: #1481C3;
    color: #ffffff;
    font-family: "Proxima Nova Bold";
    padding: 7px 10px;
}

.annoucements-close {
    position: absolute;
    right: 5px;
    width: 24px;
    height: 36px;
    cursor: pointer;
    opacity: .85;
}
.annoucements-close:hover {
    opacity: 1;
}
.annoucements-close::before,
.annoucements-close::after {
    content: '';
    width: 24px;
    height: 2px;
    background: white;
    position: absolute;
    top: 7px;
    left: 0;
}
.annoucements-close::before {
    transform: rotate(-45deg);
}
.annoucements-close::after {
    transform: rotate(45deg);
}

<body>
<div class="announcements-container">
    <div class="announcements-1">
      <div class="annoucements-header">
        <span class="annoucement-type-quantity">2 School Announcements</span>
        <i class="annoucements-close"></i>
      </div>
    </div>
    <div class="announcements-2">
      <div class="annoucements-header">
        <span class="annoucement-type-quantity">1 Admin Annoucement</span>
        <i class="annoucements-close"></i>
      </div>
    </div>
  </div>
</body>

但正如您所见，当第一个 div 从右侧滑入时，第二个 div 仍然显示。我试过添加animation-delay、transition-delay，将animation: 0.4s ease-out 0.4s 1 slideInFromRight;行中的延迟值更改为0.4，或者完全添加一个新的keframe：

@keyframes slideInFromRight {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0);
    }
}

@keyframes slideInFromRight2 {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

.announcements-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    width: 300px;
}

.announcements-1 {
    animation: 0.4s ease-out 0s 1 slideInFromRight;
  }
  
.announcements-2 {
    margin-top: 15px;
    /* opacity: 0; */
    /* display: none; */
    /* animation-fill-mode: both; */
    -webkit-animation: slideInFromRight2 0.4s ease-out 1s 1 normal;
    -moz-animation: slideInFromRight2 0.4ss ease-out 1s 1 normal;
    -o-animation: slideInFromRight2 0.4s ease-out 1s 1 normal;
    animation: slideInFromRight2 0.4s ease-out 1s 1 normal;
}

.annoucements-header {
    background-color: #1481C3;
    color: #ffffff;
    font-family: "Proxima Nova Bold";
    padding: 7px 10px;
}

.annoucements-close {
    position: absolute;
    right: 5px;
    width: 24px;
    height: 36px;
    cursor: pointer;
    opacity: .85;
}
.annoucements-close:hover {
    opacity: 1;
}
.annoucements-close::before,
.annoucements-close::after {
    content: '';
    width: 24px;
    height: 2px;
    background: white;
    position: absolute;
    top: 7px;
    left: 0;
}
.annoucements-close::before {
    transform: rotate(-45deg);
}
.annoucements-close::after {
    transform: rotate(45deg);
}

<body>
<div class="announcements-container">
    <div class="announcements-1">
      <div class="annoucements-header">
        <span class="annoucement-type-quantity">2 School Announcements</span>
        <i class="annoucements-close"></i>
      </div>
    </div>
    <div class="announcements-2">
      <div class="annoucements-header">
        <span class="annoucement-type-quantity">1 Admin Annoucement</span>
        <i class="annoucements-close"></i>
      </div>
    </div>
  </div>
</body>

但它仍然在第一个动画中出现。有没有办法让元素消失，直到它“轮到”走？可以完全使用 CSS 完成此操作，还是需要 JavaScript？

Link to JSFiddle

【问题讨论】：

标签： html css css-animations keyframe

【解决方案1】：

对于这个问题有纯 CSS 方法，该方法是首先对每个要设置动画的元素，给一个 opacity: 0，然后在 @keyframes 动画中，在动画开始时将其不透明度设置为 1。然后动画看起来像：

@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
  }
  .1%{
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

并且在你的 css 中添加 opacity: 0 到你想要动画的每个元素也不要忘记使用animation-fill-mode: forwards

【讨论】：

您好，请查看这个 JSFiddle - 我认为您建议创建两个单独的 @keyframes 动画，然后呢？ jsfiddle.net/HappyHands31/avws6h3f/15 但是他们同时动画是这样的。
@HappyHands31 没有一个动画可以完成这项工作，请参阅此处jsfiddle.net/89hvufbo/14
哦，所以关键是按照您上面对keyframes 的建议按照将animation-delay: .4s; 添加到第二个div - 谢谢！
@HappyHands31 是的，请注意另一件事，我们在两个公告类中定义了 opacity: 0 之前的动画样式，以便在动画发生时它可以覆盖 opacity: 0