CSS动画完成后图像消失[重复]答案

【问题标题】：image disappears after CSS animation completes [duplicate]CSS动画完成后图像消失[重复]
【发布时间】：2015-07-14 20:52:53
【问题描述】：

我在 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;}
}

【问题讨论】：

标签： css opacity

【解决方案1】：

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

animation: assetAnim 2s 1 forwards;

【讨论】：

【解决方案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; }
}

尝试播放状态属性。

【讨论】：