Анимация по ключевому кадру не работает на внутреннем Div при загрузке страницы

Я пытаюсь использовать решение этого вопроса:

анимация перехода css3 при загрузке?

В качестве HTML и CSS у меня есть следующее:

@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;
    /* animation: 1s ease-out 0s 1 slideInFromRight; */
}

.announcments-1 {
    animation: 1s ease-out 0s 1 slideInFromRight;
}

.announcements-2 {
    margin-top: 15px;
}

.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>

Как видите, ничего не происходит, когда animation: 1s ease-out 0s 1 slideInFromRight; применяется к внутреннему div. Однако он работает при применении к контейнеру div:

@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;
    animation: 1s ease-out 0s 1 slideInFromRight;
}

.announcments-1 {
    /*animation: 1s ease-out 0s 1 slideInFromRight;*/
}

.announcements-2 {
    margin-top: 15px;
}

.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 скользили один за другим последовательно. И если я 'X' из верхнего div, я хочу, чтобы второй div скользнул вверх и занял свое место, поэтому я предполагаю, что необходим контейнерный div.

Есть ли что-нибудь еще, что я могу сделать, чтобы анимация применялась к дочерним элементам div по одному? Есть ли что-то в ключевых кадрах, что предотвращает анимацию внутренних блоков? Лучше сделать это с помощью JavaScript?

Ссылка на JSFiddle


html css css-animations keyframe
person HappyHands31    schedule 04.06.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Во-первых, это может показаться странным, но в ваших таблицах стилей есть опечатка. Где вы объявляете announcements-1, но используете announcments-1 для стиля.

Итак, сделав это правильно, вы получите то, что хотели:

@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;
  /*animation: 1s ease-out 0s 1 slideInFromRight;*/
}

.announcements-1 {
  animation: 1s ease-out 0s 1 slideInFromRight;
}

.announcements-2 {
  margin-top: 15px;
}

.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>

person SMAKSS    schedule 04.06.2020