Can'；t停止css动画在最后一个关键帧后消失

我有一个简单的css动画，我想播放，然后在完全显示图像的最后一帧停止。但目前它播放的时候似乎又回到了第一帧，所以圣诞老人的脸消失了

我怎样才能让它播放一次，然后在最后一个关键帧上停止，或者显示图像而不会再次淡出

桑塔法斯先生{
不透明度：0；
位置：绝对位置；
左侧：40%；顶部：20%；宽度：20%；
-webkit动画名称：santaappear；
-webkit动画持续时间：13秒；
}
.santaface{-webkit动画延迟：2s；动画延迟：2s；}
@-webkit关键帧santaappear{
0%{不透明度：0；}
96%{不透明度：1；}
}

您需要

动画填充模式：向前

来防止这种情况发生

此外，需要以1的不透明度结束，因此最后一帧的不透明度必须为1

-它现在可以正常工作了

您还可以通过删除

0%

来缩短关键帧，因为这已经在初始状态中给出

@keyframes santaappear {
    96% {
        opacity:1;
    }
    100% {
        opacity:1;
    }
}

您还可以将

96%

和

100%

组合在一起

@keyframes santaappear {
    96%, 100% {
        opacity:1;
    }
}

由于要使用多个动画特性，请使用：

在演示中，我为

-moz

/

-webkit

添加了供应商前缀。除此之外，您还应该编写一个不带前缀的。关键帧也是如此

@keyframes santaappear {
    96%, 100% {
        opacity:1;
    }
}

<single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>`

animation: santaappear 13s 2s forwards;
-moz-animation: santaappear 13s 2s forwards;
-webkit-animation: santaappear 13s 2s forwards;