Css: анимация перед пульсом не работает

Коден: https://codepen.io/sabeser/pen/NWmzmaG

У меня есть #container, содержащий четыре элемента .box. Каждый элемент .box имеет набор background-image:

Я пытаюсь сделать так, чтобы каждое изображение меняло свою непрозрачность, применяя анимацию pulse: Однако ничего не происходит.

#container  {
  background-color: orange;
  display: flex;
}

.box  {
  background-image: url(https://cdn.britannica.com/16/234216-050-C66F8665/beagle-hound-dog.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100px;
  height: 100px;
  margin: 10px;
}

.box::before  {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: pulse 2.5s infinite;
}

.box @keyframes pulse  {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    opacity: 0;
  }
}

<div id='container'>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
</div>

Это @keyframes не #keyframes. Developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

— 12.04.2024 19:08

А @keyframe нельзя комбинировать .box. См. At-правила.

— 12.04.2024 19:10

html css

12.04.2024 18:59

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Элемент absolute::before может заполнить всю область элемента .box, используя inset: 0, только если мы установили для элемента .box позиционирование relative. Дочерний элемент absolute затем выровняется по позиции relative.

Значение opacity 0,1 очень тонкое и едва заметное, поэтому я увеличил его.

Элемент ::before заполнил все пространство, но у него не было background-color, поэтому я установил для него белый цвет.

Использование @keyframes вместо #keyframes правильно. Перед ним не нужно писать имя класса.

#container {
  background-color : orange;
  display          : flex;
  }
.box {
  background-image  : url(https://picsum.photos/100/100);
  background-repeat : no-repeat;
  background-size   : cover;
  width             : 100px;
  height            : 100px;
  margin            : 10px;
  position          : relative; /* added */
  }
.box::before {
  content          : '';
  position         : absolute;
  inset            : 0;
  opacity          : 0;
  background-color : #fff;                /* added */
  animation        : pulse 2.5s infinite;
  }
@keyframes pulse {                        /* changed */
    0% { opacity : 0;   }
   50% { opacity : 0.5; }                 /* changed */
  100% { opacity : 0;   }
  }

<div id='container'>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
</div>

Больше информации

CSS: использование позиции - MDN Docs
Дополнительная информация об абсолютных и относительных позициях – 2 Ответа
Абсолютная позиция с относительным родительским элементом – 2 Ответа
CSS: @keyframes - MDN Docs

12.04.2024 19:06

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

Перемещение вертикальной полосы прокрутки при прокрутке страницы

Bootstrap Accordion не запускается с правильным значком

Элемент стиля, основанный на количестве детей, которые есть у ребенка

Могу ли я с помощью CSS эффективно достичь максимальной ширины = 100% и максимальной высоты = 100% без родительского элемента, имеющего явную/фиксированную ширину и высоту, альтернативный подход?

Исключение, возникающее при попытке выбрать идентификатор CSS, содержащий "|"

Некоторые шрифты Google не импортируются в CSS в Windows

Как установить ширину всплывающего уведомления Bootstrap 4?

Таблица со строкой высотой 1 пиксель в Blazor

Создание адаптивных фигур SVG с одинаковой шириной обводки и закругленными углами

AddEventListener и удалениеEventListener в меню при изменении размера окна

Css: анимация перед пульсом не работает

Ответы 1

Больше информации

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

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