Анимация CSS - от 0 до 100 и обратно к 0

#css #css-transitions #css-animations

#css #css-переходы #css-анимация

Вопрос:

Я установил div выпадающего списка, чтобы иметь анимацию, как показано ниже, и это происходит при открытии div:

 .locationDropdownList {
  position: absolute;
  top: 83px;
  width: 100%;
  background: white;
  z-index: 1000;
  padding: 0 1rem 1rem 1rem;
  animation: dropdown 250ms ease-in-out;
  box-shadow: 0px 30px 25px 0px rgba(0, 0, 0, 0.2);
  max-height: 250px;
  overflow-x: hidden;
}

@keyframes dropdown {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

Он работает при открытии, но как я могу также установить его при закрытии? Я попытался добавить 0% под 100%, но это ничего не дало. Есть предложения по этому поводу?

Обновить:

Итак, как это работает, как показано ниже

У меня есть родительский элемент вызываемого div LocationDropdown , и при нажатии на него вызываемый класс focused применяется к родительскому элементу, который затем активирует выпадающий список для открытия locationDropdownList , который представляет собой div, содержащий список

 <div class="LocationDropdown">
  <div>
    <p class="locationSelectText">London</p>
  </div>
</div>

при нажатии применяется сфокусированный класс

 <div class="LocationDropdown focused">
  <div>
    <p class="locationSelectText">London</p>
  </div>
  <div class="locationDropdownList">
    <ul>
      <li></li>
       .....
       .....
      </ul>
    <ul>
      <li></li>
      .....
      .....
    </ul>
    <ul>
      <li></li>
       .....
       .....
    </ul>
  </div>
</div>

1. простой переход будет работать нормально. для открытия вашего div необходимо установить стиль по умолчанию, если вы добавляете класс (или :hover /:focus/:active selectors). Как вы делаете это переключение стиля? Можете ли вы уточнить свой вопрос? как показано в коде, ничто не говорит о том, как применяется этот стиль

2. Я попробовал это и применил к переходу по максимальной высоте к div, который содержит список, и это не сработало, и я понятия не имею, почему.

3. вот что я имел в виду под переходом и непрозрачностью codepen.io/anon/pen/LvWWOr или максимальная высота dabblet.com/gist/5286471 😉

4. @G-Cyr Я попробовал ваше решение — оно вообще не применяет переход, но когда я проверяю и включаю и выключаю непрозрачность, оно делает то, что я хочу

Ответ №1:

Это ваше значение?

 .locationDropdownList {
  position: absolute;
  top: 83px;
  width: 100%;
  background: white;
  z-index: 1000;
  padding: 0 1rem 1rem 1rem;
  animation: dropdown 1s ease-in-out infinite;
  box-shadow: 0px 30px 25px 0px rgba(0, 0, 0, 0.2);
  max-height: 250px;
  overflow-x: hidden;
}

@keyframes dropdown {
  0% {
    opacity: 0;
  }
  
  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

 <div class="LocationDropdown focused">
  <div>
    <p class="locationSelectText">London</p>
  </div>
  <div class="locationDropdownList">
    <ul>
      <li></li>
       .....
       .....
      </ul>
    <ul>
      <li></li>
      .....
      .....
    </ul>
    <ul>
      <li></li>
       .....
       .....
    </ul>
  </div>
</div>