保留在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; 
}