CSS3 animation, picture disappears after moving

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...

Answers


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.


Need Your Help

VHDL - FSM Control

vhdl fsm

I'm a beginner and I need a little help . My "current_s" is changing whenever rising edge of the clock detected. But, I want it to change only once when "Dot" or "Dash" is '1'.

List is being emptied in the middle of a method! Help!

c# list variables page-lifecycle clear

this has me puzzled - I am no expert on page life cycle but I do not see why this is happening. It may be a simple case of where I declare my list. Here is the code: