0xD34F

Пробовал с mix-blend-mode, не получилось.

Пробовал с mix-blend-mode, получилось.

https://jsfiddle.net/svka2byw/
https://jsfiddle.net/svka2byw/1

position: fixed;
right: 0;
top: 0;

.card:not(:last-child):after {

Потому что каждая анимация оканчивается событием transitionend. И вы все их обрабатываете, переключая значение transform, и, тем самым, запуская следующую анимацию. Вешайте обработчик события, который срабатывает однократно - добавьте в вызов addEventListener в качестве третьего аргумента { once: true }.

Всё работает.

Ширина у ::before нулевая, поэтому картинки не видно.

Можно repeating-linear-gradient применить, например:

background-image: repeating-linear-gradient(45deg, #fff, #fff 2px, transparent 2px, transparent 50px);

Поместить картинку после input'а. Если важно, чтобы отображалась до - тогда задать display: flex родителю и выставить order.

footer {
  pointer-events: none;
}

.tabs__column {
  display: block;
  column-count: 2;
}

:nth-child(n + 3)

ul ul {
  display: none;
}

input[type="radio"]:checked ~ ul {
  display: block;
}

Потому что отсутствует начальное значение анимируемого свойства. Добавьте top: 0; для .pic.

background: 50% / auto 100% repeat-x;

li:nth-child(5n + 2),
li:nth-child(5n + 3) {
  color: red;
}

content: "";
display: inline-block;
font-size: 10px;
width: 1em;
height: 1em;
transform: rotate(45deg);
border: 2px solid #fff;
border-left: none;
border-bottom: none;

Задавайте элементам, в зависимости от их положения, различную задержку анимации:

.el {
  animation: blink 2s linear infinite;
  background: #000;
}

.el:nth-child(1) { animation-delay: 0s; }
.el:nth-child(2) { animation-delay: 0.5s; }
.el:nth-child(3) { animation-delay: 1s; }
.el:nth-child(4) { animation-delay: 1.5s; }

@keyframes blink {
  0%, 20% {
    background: #000;
  }
  10% {
    background: #F00;
  }
}

https://jsfiddle.net/zcy6v7w5/

Потому что селектор неправильный. Добавьте + перед .lov.

const wrapper = document.querySelector('.block');
const blockSelector = '.block_one';
const activeClass = 'active';

wrapper.addEventListener('mouseover', onHover);
wrapper.addEventListener('mouseout', onHover);

function onHover({ type, target }) {
  const block = type === 'mouseover' && target.closest(blockSelector);
  this.querySelectorAll(blockSelector).forEach(n => {
    n.classList.toggle(activeClass, !!block && n !== block);
  });
}

UPD. Наконец-то дождались, теперь можно без js задачу решить:

.block:has(.block_one:hover) .block_one:not(:hover) {
  /* сюда переносим стили того класса, который через js добавлялся */
}

<iframe :srcdoc="htmlContent"></iframe>