当动画完成时，要淡出的 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;
}

从MDNanimation-fill-mode属性：

该forwards值将强制目标保留由执行期间遇到的最后一个关键帧设置的计算值。遇到的最后一个关键帧取决于 animation-direction 和 animation-iteration-count 的值。

默认情况下，value是 none，这意味着动画在执行之前或之后不会对目标应用任何样式。