Question

我有一个带有一些文字的div：

<div>Rain.js</div>

及其CSS：

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

我想让div淡入，因此我制作了动画fadein，将opacity的{{1}}从0更改为0.1

div

正如您所见，here @keyframes fadein { from { opacity: 0; } to { opacity: 0.1; } }从fadein 0到0.1 {2}按预期发生在2秒内。但是在2秒后，不透明度从0.1变为1.

1）为什么会这样？

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

Answer 1

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

在div上添加到您的CSS：

opacity: 0.1;

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

Answer 2

您尚未添加animation-fill-mode: forwards以保留动画的最终状态。

由于CSS规则中没有为不透明度设置默认属性，默认情况下animation-fill-mode为none，因此元素在动画结束后将默认不透明度值设为1。

JSfiddle Demo

＆＃13;

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

＆＃13;

<div>Rain.js</div>

＆＃13;

Answer 3

完成fadein后，div将获取其指定的值。

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

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

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

3 个答案: