image disappears after CSS animation completes

Question

I am animating an asset in after a CSS delay but once the asset has faded in, it disappears. I initially am setting visibility to hidden and it seems that that is where it rests after the animation. How can I keep the asset from disappearing oncer the animation stops?

#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;}
}

score 6 · Accepted Answer · answered Jul 14 '15 at 12:45

6

I resolved my own issue. Adding animation-fill-mode:forwards fixes it, so the updated code is:

animation: assetAnim 2s 1 forwards;

answered Jul 14 '15 at 12:45

kenn

113
1
9

score 0 · Answer 2 · answered Jul 14 '15 at 12:52

#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; }
}

Try to Play-state property.

image disappears after CSS animation completes

2 Answers2