html - CSS3动画，图片移动后消失

Question

我尝试使用 CSS3 为图片制作动画，效果很好，但我的图片在动画结束时消失了。

在这里你可以尝试(点击屏幕中间的图片，你可以看到另一张在 Y 轴上平移的图片，尝试中间的另一个按钮以重新启动动画) http://jsfiddle.net/58CEh/

这是我的 CSS3 动画

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

如你所见，我没有隐藏任何东西......

Answer 1

它们并没有消失，它们只是在动画完成后恢复到原来的位置。

要解决此问题，您需要(在您的 CSS 中)将元素的位置设置为您希望它们结束的位置。

参见 this线程。