Список CSS постепенно исчезает с неизвестным количеством

Я пытался сделать постепенное исчезновение, используя обычный CSS и без jquery в списке, чтобы он мог исчезать один за другим. Однако я знаю, как это сделать, лишь в ограниченном списке. Как мне зациклить css, чтобы независимо от того, сколько у меня списка, он все еще работал.

Вот что я сделал:

.ladder {
  opacity: 0;
  -webkit-animation: fadeIn 0.9s 1;
  animation: fadeIn 0.9s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.ladder:nth-child(5n+1) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.ladder:nth-child(5n+2) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.ladder:nth-child(5n+3) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.ladder:nth-child(5n+4) {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.ladder:nth-child(5n+5) {
  -webkit-animation-delay: 1.0s;
  animation-delay: 1.0s;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}

<li class = "ladder">A</li>
<li class = "ladder">B</li>
<li class = "ladder">C</li>
<li class = "ladder">D</li>
<li class = "ladder">E</li>

Мой вопрос: как заставить CSS работать независимо от того, сколько там списков.

html css css-animations

05.04.2018 16:19

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

211

Ответы 1

Вот идея использования переменной CSS, которая позволяет сократить код. Это не универсально, но проще добавить простой встроенный CSS к каждому li, чем писать сложный CSS:

.ladder {
  opacity: 0;
  animation: fadeIn 1s var(--d) forwards;
}

@keyframes fadeIn {
  100% {
    opacity: 1;
  }
}

<ul>
  <li style = "--d:0s" class = "ladder">A</li>
  <li style = "--d:0.2s" class = "ladder">B</li>
  <li style = "--d:0.4s" class = "ladder">C</li>
  <li style = "--d:0.6s" class = "ladder">D</li>
  <li style = "--d:0.8s" class = "ladder">E</li>
</ul>

Вот еще одна идея, где вы можете применить анимацию на ul:

ul {
  position:relative;
}
ul:before {
  content:"";
  position:absolute;
  top:-20px;
  bottom:0;
  left:0;
  right:0;
  background:linear-gradient(to bottom,transparent,#fff 20px);
  animation:fadeIn 2s forwards
}

@keyframes fadeIn {
  0% {
    top:-10px;
  }
  100% {
    top: 100%;
  }
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
</ul>

Возможно ли это без использования встроенного CSS?

— 05.04.2018 16:38

@Squish я добавил еще одну идею;)

— 05.04.2018 16:45

Хахахах, это больше похоже на скольжение вниз, но это вроде как работает! Спасибо

— 05.04.2018 17:10

@Squish, я сделал небольшую корректировку, чтобы он выглядел лучше;)

— 05.04.2018 17:21

почему над списком нависает тень: P

— 05.04.2018 17:26

@Squish для лучшего эффекта :)

— 05.04.2018 17:27

05.04.2018 16:36

Другие вопросы по теме

Javascript - прокрутка события остановки прокрутки элемента

Контейнер соответствия высоты изображения

Как навести курсор в теге <area> с помощью css / javascript

Bootstrap 4 Фиксированная верхняя панель навигации показывает свернутый и скрытый контент

Есть ли способ центрировать всплывающую подсказку по тексту, а не по элементу th?

Как проверить форму Flask при отправке?

Webpack настроил компоненты React, на которые не влияет css

Как создать такой же фоновый эффект на этой странице?

Сделать мое изображение и скрипт адаптивными

Можно ли выполнить переход css от одного значения к другому при применении класса?

Список CSS постепенно исчезает с неизвестным количеством

Ответы 1

Другие вопросы по теме

Похожие вопросы