css 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 on right has slightly lower opacity

感谢任何建议/帮助

Answer 1

~~animation: 0.5 header ease 1.25s;~~
没有时间单位的 0.5 被解释为 animation-iteration-count，如果设置为 0.5，则表示："Run my animation halfways."

你想要的是：name, duration, easing, delay, fill-mode 使用：

animation: header 0.5s ease 1.25s forwards;

并使用 s 或 ms 单位作为持续时间值。

这是动画 shorthand 订单的提醒：

name, duration, easing, delay, iteration-count, direction, fill-mode

.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>

css animation-fill-mode 向前改变元素的不透明度

css animation-fill-mode foward changes element opacity

css

opacity

css-animations