在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

您需要指定animation-fill-mode: forwards是否希望元素的CSS保留在动画的最后一步.

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

转发:目标将保留执行期间遇到的最后一个关键帧设置的计算值.

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