我正在尝试使第二个元素完全不显示在屏幕上，直到第一个元素完成动画制作为止。到目前为止，我已经尝试过：
@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，在0.4行中将延迟值更改为animation: 0.4s ease-out 0.4s 1 slideInFromRight;，或完全添加新的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？
有一个纯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