CSS3 animation, picture disappears after moving

Question

I try to animate a picture with CSS3, it works, but my picture disppear at the end of my animation.

Here you can try (click on a picture on the middle of your screen, you can see another picture who translate on Y axis, try another bouton on the middle for relaunch the animation) http://jsfiddle.net/58CEh/

Here my CSS3 animation

body
{
    background-image:url("Pictures/background.jpg");

    background-image: no-repeat;
    position: relative;
}

#icon
{
        margin-left:35%;
        margin-top:25%;
        position: fixed;

}

#desk
{
    margin-left:35%;
    margin-top: 18%;
    position: fixed;
}
#chat
{
    top: -400px;
    margin-left:50%;
    position: fixed;
}
#outlook
{
    top: -400px;
    margin-left:50%;
    position: fixed;

}
#outlook2
{
    top: -400px;
    margin-left:10%;
    position: fixed;
}


:target
{
        -webkit-animation: soBounceBitch 1.6s linear;

}

@-webkit-keyframes soBounceBitch {

    from { -webkit-transform:translateY( 1200px); }
        46%  { -webkit-transform:translateY( 1110px); }
    48%  { -webkit-transform:translateY( 1020px); }
    50%  { -webkit-transform:translateY( 1000px); }
    52%  { -webkit-transform:translateY( 940px); }
    60% { -webkit-transform:translateY ( 900px ) ; }
    64% { -webkit-transform:translateY ( 880px ) ; }
    70% { -webkit-transform:translateY ( 840px ) ; }
    74% { -webkit-transform:translateY ( 790px ) ; }
    80% { -webkit-transform:translateY ( 760px ) ; }
    100% { -webkit-transform:translateY ( 760px ) ; }
    to   { -webkit-transform:translateY(  700px  ); }

As you can see I'm not hide anything...

Your fiddle does not show the images. Also be sure to add the other browser prefixes for the CSS 3 animations to make it cross-browser. — JohanVdR, Mar 30 '14 at 16:10
It was a test, that why I only use webkit, but thank you for the link ! — xif, Mar 30 '14 at 16:36

score 1 · Accepted Answer · edited May 23 '17 at 11:49

1

They aren't disappearing, they are just reverting to their original positions after the animation is complete.

To fix this you want to set (in your CSS) the element's position to where you want them to end up.

See this thread.

edited May 23 '17 at 11:49

Community

1
1

answered Mar 30 '14 at 16:08

Patrick Allen

2,148
2
16
20

CSS3 animation, picture disappears after moving

1 Answers1