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

Question

我有一些文字DIV：

<div>Rain.js</div> 

和CSS：

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

我想使div淡入所以我做了一个动画fadein改变div从0的opacity至0.1

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

正如你所看到的herefadein从opacity 0到0.1发生在2秒内如预期。但2秒后，不透明度从0.1变为1.

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

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

Answer 1

你还没有添加animation-fill-mode: forwards保存动画的最终状态。

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

JSfiddle Demo

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）。

添加到您的CSS的div：

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; 
}