保留CSS动画中的最后一个关键帧属性

Question

我有一个div，里面有一些文本：

<div>Rain.js</div>

及其CSS:

div {
  -webkit-animation: fadein 2s;
  color:black;
  font-size:70px;
}

我想让div淡出，所以我制作了一个动画fadein，将div的opacity从0更改为0.1

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

正如您在这里看到的，从opacity 0到0.1的fadein在2秒内发生，正如预期的那样。但2秒钟后，不透明度从0.1变为1。

1） 为什么会发生这种情况？

2） 我该如何防止这种情况发生？

Answer 1

您没有添加animation-fill-mode: forwards来保留动画的最终状态。

由于CSS规则中没有为不透明度设置默认属性，并且默认情况下animation-fill-mode为"无"，因此动画完成后，元素的默认不透明度值为1。

JSfiddle演示

div {
  animation: fadein 2s;
  color: black;
  font-size: 70px;
  animation-fill-mode: forwards;
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.1;
  }
}

<div>Rain.js</div>

Answer 2

动画结束时，会将div置于其未设置的opacity默认状态。（因此它将是1）。

添加到div:上的CSS

opacity: 0.1;

演示：http://jsfiddle.net/qm3f6717/1/

Answer 3

渐变元完成后，div将采用其指定的值。

您只需使div的不透明度等于最终关键帧的不透明度值。

div
{
    -webkit-animation: fadein 2s;
    color:black;
    font-size:70px;
    opacity:0.1;
}