CODEWITHSUNDEEP
htmlcsscss-animations
xif
xif

Reputation: 343

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

Upvotes: 0

Views: 1904

Answers (1)

Patrick Allen
Patrick Allen

Reputation: 2168

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.

Upvotes: 1

Related Questions