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

您需要指定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;
  }
}