css - 在 1 之前停止 CSS3 不透明度动画

Question

我正在尝试为某个 div 不透明度设置动画 from 0 to 0.6，但似乎在动画结束时它跳转到 1。

我错过了什么？

#test {
  width: 200px;
  height: 200px;
  background-color: #900;
  animation: fadein 2s;
  -moz-animation: fadein 2s;
  -webkit-animation: fadein 2s;
  -o-animation: fadein 2s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}

@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}

@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}

<div id="test"></div>

Answer 1

如果您希望元素的 CSS 保留在动画的最后一步，则需要指定 animation-fill-mode: forwards。

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

Forwards: The target will retain the computed values set by the last keyframe encountered during execution.

#test {
  width: 200px;
  height: 200px;
  background-color: #900;
  animation: fadein 2s forwards;
  -moz-animation: fadein 2s forwards;
  -webkit-animation: fadein 2s forwards;
  -o-animation: fadein 2s forwards;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}

@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}

@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}

<div id="test"></div>