CSS 动画完成后图像消失

Question

我在 CSS 延迟后为资产设置动画，但一旦资产淡入，它就会消失。我最初将可见性设置为隐藏，看起来这是它在动画之后的位置。如何防止资源在动画停止后消失？

#asset {
    position:absolute;
    left:649px;
    top:215px;
    visibility: hidden;
    animation: assetAnim 2s 1;
    animation-delay: 1s;
}

@-webkit-keyframes assetAnim {
    0% { opacity: 0.0; visibility: visible;}
    100% { opacity: 1.0; visibility: visible;}
}

Answer 1

我解决了我自己的问题。添加 animation-fill-mode:forwards 修复它，所以更新的代码是：

animation: assetAnim 2s 1 forwards;

Answer 2

#asset {
    position:absolute;
    left:649px;
    top:215px;
    visibility: hidden;
    animation: assetAnim 2s 1 forwards;
    animation-delay: 1s;
    animation-play-state: paused;
}

@-webkit-keyframes assetAnim {
    0% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

尝试播放状态属性。

CSS 动画完成后图像消失

image disappears after CSS animation completes

css

opacity