css foward animation-fill-mode меняет непрозрачность элемента

Question

При наличии проблемы с изображением, когда изображение завершает анимацию и заполняется вперед, его непрозрачность ниже, чем если бы я просто загружал изображение обычным образом (без анимации)

.header-container .col-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  z-index: -1;
}
.header-container .col-2 img {
  opacity: 0;                       //
  animation: 0.5 header ease 1.25s; // these three lines seem to be the problem
  animation-fill-mode: forwards;    //
}

@keyframes header {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Я посмотрел на стили в своем браузере (chrome) и не могу понять, почему это происходит На изображении, как выглядит разница + chrome стилей

img справа имеет немного меньшую непрозрачность

Спасибо за любые предложения / помощь

Answer 1

animation: 0.5 header ease 1.25s;
0.5 без единицы времени интерпретируется как animation-iteration-count, что при значении 0.5 означает: "Запустите мою анимацию наполовину."

То, что вы хотите: name, duration, easing, delay, fill-mode использовать:

animation: header 0.5s ease 1.25s forwards;

и использовать s или ms единица для значения продолжительности.

Вот напоминание для краткого порядка анимации:

имя, продолжительность, замедление, задержка, счетчик итераций, направление, режим заполнения

.header-container .col-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  z-index: -1;
  background: url("https://placehold.it/100x100/00f");
}
.header-container .col-2 img {
  opacity: 0;                       
  animation: header 0.5s ease 1.25s forwards; 
}

@keyframes header {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<div class="header-container">
  <div class="col-2">
    <img src="https://placehold.it/200x200/f00" alt="Test">
  </div>
</div>