當動畫結束時，淡出的CSS動畫不會淡出

Question

我正在使用以下代碼淡出圖像。

.fadeOut { 
    -webkit-animation: fadeout 1s; /* Safari, Chrome and Opera > 12.1 */ 
    -moz-animation: fadeout 1s; /* Firefox < 16 */ 
    -ms-animation: fadeout 1s; /* Internet Explorer */ 
    -o-animation: fadeout 1s; /* Opera < 12.1 */ 
    animation: fadeout 1s; 
} 

@keyframes fadeout { 
    from { 
     opacity: .9; 
    } 

    to { 
     opacity: 0; 
    } 
} 

而在我的HTML頁面，我有

<img src="~/Content/Images/myImage.png" class="fadeOut" /> 

淡出作品（最初），但圖像已經淡出後，用完全不透明返回。

我怎樣才能保持不透明度爲0？

Answer 1

您需要將animation-fill-mode屬性更改爲forwards。

.fadeOut { 
    animation: fadeout 1s forwards; 
} 

從MDN animation-fill-mode property：

的forwards值將迫使目標保留在執行過程中遇到的最後一個關鍵幀設置的計算值。遇到的最後一個關鍵幀取決於animation-direction和animation-iteration-count的值。

默認情況下，value是沒有的，這意味着之前或正在執行動畫後不會施加任何樣式的目標。