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主题。

CSS3动画，移动后图片消失

1 个答案: